fix: fix modular ux and bugs (#1738)

* fix: fix add bugs and ux * Create dirty-teachers-worry.md
jpmorganchase · May 19, 2022 · bc95a70 · bc95a70
1 parent 862728b
commit bc95a70
Show file tree

Hide file tree

Showing 10 changed files with 232 additions and 108 deletions.
diff --git a/.changeset/dirty-teachers-worry.md b/.changeset/dirty-teachers-worry.md
@@ -0,0 +1,5 @@
+---
+"modular-scripts": patch
+---
+
+fix: fix modular ux and bugs
diff --git a/packages/modular-scripts/src/__tests__/__snapshots__/app.test.ts.snap b/packages/modular-scripts/src/__tests__/__snapshots__/app.test.ts.snap
@@ -8662,6 +8662,25 @@ exports[`When working with a nested app can generate a manifest 1`] = `
 "
 `;
 
+exports[`when working with a NODE_ENV app can generate a hashed js chunk in the js directory 1`] = `
+"\\"use strict\\";
+(globalThis.webpackChunknode_env_app =
+  globalThis.webpackChunknode_env_app || []).push([
+  [179],
+  {
+    908: () => {
+      console.log(\\"production\\");
+    },
+  },
+  (o) => {
+    var e;
+    (e = 908), o((o.s = e));
+  },
+]);
+//# sourceMappingURL=main.1c6de6d0.js.map
+"
+`;
+
 exports[`when working with an app can generate a asset-manifest 1`] = `
 "{
   \\"files\\": {

diff --git a/packages/modular-scripts/src/__tests__/app.esbuild.test.ts b/packages/modular-scripts/src/__tests__/app.esbuild.test.ts
@@ -40,10 +40,9 @@ afterAll(cleanup);
 
 describe('when working with an app', () => {
   beforeAll(async () => {
-    await modular(
-      'add sample-esbuild-app --unstable-type app --unstable-name sample-esbuild-app',
-      { stdio: 'inherit' },
-    );
+    await modular('add sample-esbuild-app --unstable-type app', {
+      stdio: 'inherit',
+    });
 
     await modular('build sample-esbuild-app', {
       stdio: 'inherit',

diff --git a/packages/modular-scripts/src/__tests__/app.node-env.test.ts b/packages/modular-scripts/src/__tests__/app.node-env.test.ts
@@ -35,10 +35,7 @@ afterAll(cleanup);
 
 describe('when working with a NODE_ENV app', () => {
   beforeAll(async () => {
-    await modular(
-      'add node-env-app --unstable-type app --unstable-name node-env-app',
-      { stdio: 'inherit' },
-    );
+    await modular('add node-env-app --unstable-type app', { stdio: 'inherit' });
 
     await fs.writeFile(
       path.join(modularRoot, 'packages', 'node-env-app', 'src', 'index.ts'),

diff --git a/packages/modular-scripts/src/__tests__/app.test.ts b/packages/modular-scripts/src/__tests__/app.test.ts
@@ -35,6 +35,9 @@ function modular(str: string, opts: Record<string, unknown> = {}) {
 }
 
 function cleanup() {
+  rimraf.sync(path.join(packagesPath, 'node-env-app'));
+  rimraf.sync(path.join(modularRoot, 'dist/node-env-app'));
+
   rimraf.sync(path.join(packagesPath, 'sample-app'));
   rimraf.sync(path.join(modularRoot, 'dist/sample-app'));
 
@@ -50,13 +53,74 @@ function cleanup() {
 beforeAll(cleanup);
 afterAll(cleanup);
 
-describe('When working with a nested app', () => {
+describe('when working with a NODE_ENV app', () => {
   beforeAll(async () => {
-    await modular(
-      'add scoped/sample-app --unstable-type app --unstable-name @scoped/sample-app',
-      { stdio: 'inherit' },
+    await modular('add node-env-app --unstable-type app', { stdio: 'inherit' });
+
+    await fs.writeFile(
+      path.join(modularRoot, 'packages', 'node-env-app', 'src', 'index.ts'),
+      `
+      console.log(process.env.NODE_ENV);
+
+      export {};
+    `,
     );
 
+    await modular('build node-env-app', {
+      stdio: 'inherit',
+    });
+  });
+
+  it('can build a app', () => {
+    expect(tree(path.join(modularRoot, 'dist', 'node-env-app')))
+      .toMatchInlineSnapshot(`
+      "node-env-app
+      ├─ asset-manifest.json #1qjm6tq
+      ├─ favicon.ico #6pu3rg
+      ├─ index.html #z3zac4
+      ├─ logo192.png #1nez7vk
+      ├─ logo512.png #1hwqvcc
+      ├─ manifest.json #19gah8o
+      ├─ package.json
+      ├─ robots.txt #1sjb8b3
+      └─ static
+         └─ js
+            ├─ main.1c6de6d0.js #1xkcjze
+            ├─ main.1c6de6d0.js.map #1mixunf
+            ├─ runtime-main.182069c4.js #r0hm4v
+            └─ runtime-main.182069c4.js.map #ul1xez"
+    `);
+  });
+
+  it('can generate a hashed js chunk in the js directory', async () => {
+    expect(
+      prettier.format(
+        String(
+          await fs.readFile(
+            path.join(
+              modularRoot,
+              'dist',
+              'node-env-app',
+              'static',
+              'js',
+              'main.1c6de6d0.js',
+            ),
+          ),
+        ),
+        {
+          filepath: 'main.1c6de6d0.js',
+        },
+      ),
+    ).toMatchSnapshot();
+  });
+});
+
+describe('When working with a nested app', () => {
+  beforeAll(async () => {
+    await modular('add @scoped/sample-app --unstable-type app', {
+      stdio: 'inherit',
+    });
+
     await modular('build @scoped/sample-app', {
       stdio: 'inherit',
     });
@@ -241,10 +305,7 @@ describe('When working with a nested app', () => {
 
 describe('when working with an app', () => {
   beforeAll(async () => {
-    await modular(
-      'add sample-app --unstable-type app --unstable-name sample-app',
-      { stdio: 'inherit' },
-    );
+    await modular('add sample-app --unstable-type app', { stdio: 'inherit' });
 
     // Let's replace the App module with something of our own
     // with a test specific element we can introspect

diff --git a/packages/modular-scripts/src/__tests__/index.test.ts b/packages/modular-scripts/src/__tests__/index.test.ts
@@ -54,22 +54,13 @@ describe('modular-scripts', () => {
   beforeAll(async () => {
     await cleanup();
 
-    await modular(
-      'add sample-view --unstable-type view --unstable-name sample-view',
-      { stdio: 'inherit' },
-    );
-    await modular(
-      'add sample-package --unstable-type package --unstable-name sample-package',
-      {
-        stdio: 'inherit',
-      },
-    );
-    await modular(
-      'add nested/sample-nested-package --unstable-type package --unstable-name @nested/sample-package',
-      {
-        stdio: 'inherit',
-      },
-    );
+    await modular('add sample-view --unstable-type view', { stdio: 'inherit' });
+    await modular('add sample-package --unstable-type package', {
+      stdio: 'inherit',
+    });
+    await modular('add @nested/sample-package --unstable-type package', {
+      stdio: 'inherit',
+    });
 
     await fs.copyFile(
       path.join(__dirname, 'TestView.test-tsx'),
@@ -122,9 +113,9 @@ describe('modular-scripts', () => {
     });
 
     it('can add a nested package', () => {
-      expect(tree(path.join(packagesPath, 'nested/sample-nested-package')))
+      expect(tree(path.join(packagesPath, 'nested/sample-package')))
         .toMatchInlineSnapshot(`
-        "sample-nested-package
+        "sample-package
         ├─ package.json
         └─ src
            ├─ __tests__
@@ -312,7 +303,7 @@ describe('modular-scripts', () => {
 
   it('can execute tests', async () => {
     const output = await modular(
-      'test sample-package sample-view sample-nested-package --watchAll false',
+      'test sample-package sample-view @nested/sample-package --watchAll false',
       {
         all: true,
         reject: false,
@@ -337,7 +328,7 @@ describe('modular-scripts', () => {
       'PASS test packages/sample-package/src/__tests__/index.test.ts',
     );
     expect(cleanedOutput).toContain(
-      'PASS test packages/nested/sample-nested-package/src/__tests__/index.test.ts',
+      'PASS test packages/nested/sample-package/src/__tests__/index.test.ts',
     );
   });