Merge pull request #122 from cardstack/ember

Ember builds with non-portable addon bundles

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 **/*.log
+/dist
 /node_modules
 /packages/builder-worker/test/test-app
 /packages/builder-worker/.file-daemon-key
@@ -36,4 +37,4 @@
 /packages/shared/**/*.js.map
 
 !webpack.config.js
-!/cdn/**/dist
+

.vscode/launch.json

@@ -12,7 +12,23 @@
       "env": {},
       "console": "integratedTerminal",
       "program": "${workspaceRoot}/dist/file-daemon/main.js",
-      "args": [".", "../test-lib", "../recipes", "../../cdn/pkgs"]
+      "args": [".", "../test-lib"]
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Serve ember-app",
+      "cwd": "${workspaceRoot}/packages/ember-app",
+      "env": {},
+      "console": "integratedTerminal",
+      "program": "${workspaceRoot}/packages/file-daemon/bin/file-daemon.js",
+      "args": [
+        "--builderServer=http://localhost:8080",
+        "--uiServer=http://localhost:4300/catalogjs/ui/",
+        "--pkgsPath=../../working/cdn/pkgs",
+        "--ignore=node_modules",
+        "/private/var/folders/8z/_x2_6pv12n96tlr8g19hqp6h0000gn/T/embroider/e08385/packages/ember-app"
+      ]
     },
     {
       "type": "node",
@@ -24,10 +40,9 @@
       "args": [
         "--builderServer=http://localhost:8080",
         "--uiServer=http://localhost:4300/catalogjs/ui/",
+        "--pkgsPath=../../working/cdn/pkgs",
         ".",
-        "../test-lib",
-        "../recipes",
-        "../../cdn/pkgs"
+        "../recipes"
       ]
     },
     {
@@ -40,9 +55,9 @@
       "args": [
         "--builderServer=http://localhost:8080",
         "--uiServer=http://localhost:4300/catalogjs/ui/",
+        "--pkgsPath=../../working/cdn/pkgs",
         ".",
-        "../recipes",
-        "../../cdn/pkgs"
+        "../recipes"
       ]
     },
     {
@@ -99,6 +114,20 @@
       "program": "${workspaceRoot}/packages/builder-node/bin/install.js",
       "args": ["--project=.", "@babel/core"]
     },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Run ember app pkg install",
+      "cwd": "${workspaceRoot}",
+      "console": "integratedTerminal",
+      "env": {},
+      "program": "${workspaceRoot}/packages/builder-node/bin/install.js",
+      "args": [
+        // "--project=/private/var/folders/8z/_x2_6pv12n96tlr8g19hqp6h0000gn/T/embroider/e08385/packages/ember-app",
+        "--project=/private/var/folders/8z/_x2_6pv12n96tlr8g19hqp6h0000gn/T/embroider/e08385",
+        "ember-welcome-page/components/welcome-page"
+      ]
+    },
     {
       "type": "node",
       "request": "launch",

README.md

@@ -26,12 +26,16 @@ Note: if you want to work with a local CatalogJS package registry, then you can
 
 ## Building it
 
-Setup all the npm dependencies:
+1. Setup all the npm dependencies:
 
 ```sh
 yarn install
 ```
 
+2. Yarn link the `@embroider/core` and `@embroider/compat` packages from the `catalogjs-experiment` branch of the https://github.com/ef4/snowpack-experiment repo to the `packages/ember-app` workspace in this repository. (This step eventually goes away after some key upstream embroider changes are made available).
+
+3. Update the `packages/src/core/babel-plugin-adjust-imports.ts#adjustSpecifier` method to indicate if the build is using the file daemon or not (`runningInsideFileDaemon` variable), and recompile the TypeScript
+
 ## Running it (for purposes of development)
 
 1. Perform typescript compilation:
@@ -49,12 +53,22 @@ yarn install
    ```
 4. Start serving the sample app:
    ```sh
-   yarn serve
+   yarn serve:test-app
+   ```
+   or optionally serving the sample ember-app with hosted pkgs:
+   ```sh
+   yarn serve:ember-app
+   ```
+   or optionally serving the sample ember-app with local pkgs:
+   ```sh
+   yarn serve:ember-app-local-pkgs
    ```
+   This will run both an ember-cli server which uses embroider as scaffolding for generating stage 2 outputs, as well as running a file daemon to host those stage2 outputs.
+
 
    Note: if you want to be able to work with recipes locally (instead of being served from github, which is the default), then you can additionally mount the `../recipes` folder in the package.json for the `packages/test-app` (or `packages/test-lib`). When a local recipes filesystem is mounted we will use that instead of the github hosted recipes.
 
-   Note: if you want to be able to work with a local CatalogJS package registry, then you can provide the `--pkgsPath path/to/your/pkgs` parameter to start script command in the package.json for the `packages/test-app` (or `packages/test-lib`). Make sure to use the `packages/builder-node/bin/install.js` script to generate your CatalogJS packages locally.
+   Note: if you want to be able to work with a local CatalogJS package registry, then you can provide the `--pkgsPath path/to/your/pkgs` parameter to start script command in the package.json for the `packages/test-app` (or `packages/test-lib`). Make sure to use the `packages/builder-node/bin/install.js` script to generate your CatalogJS packages locally. As a convenience, all the test apps have a yarn script to serve the packages locally from the `./working/cdn/pkgs` folder. For example, in `packages/test-app/package.json` there is a `start:local-pkgs` script that is available to use.
 
 If you want to use a `tsc --watch`, it's a little tricky since each package has
 its own `tsconfig.json` and needs to have it's own `tsc --watch`. You can run
@@ -70,6 +84,9 @@ yarn pkg
 ```
 And the package will be created in the `./dist` folder. From there the `./dist/catalogjs` script can be executed.
 
+### Generating bundles for ember-app
+To generate the ember-app bundles, there is a yarn script, `yarn ember-acceptance-test` that will generate the bundles for the ember-app. eventually this will be the full acceptance tests for the ember app after the next phase of work is completed. Make sure the hacked embroider is set to `runningInsideFileDaemon = false` and TS compiled before making the bundles.
+
 ## Testing it
 
 From the command line you can run all the tests by executing the following from
@@ -94,16 +111,12 @@ running in your browser) that the CLI is using and will troll you.
 
 To run the node tests:
 
-1. cd to `packages/builder-worker`
-2. run webpack:
-   ```sh
-   yarn webpack
-   ```
-   (use the `--watch` option if you want to watch the file system for changes)
-3. run the tests:
-   ```sh
-   yarn qunit assets/node-test.js
-   ```
+1. cd to `packages/builder-node`
+2. run `yarn test`
+3. cd to `packages/file-daemon`
+4. run `yarn test`
+5. cd to `packages/file-daemon-client`
+7. run `yarn test`
 
 ## Releasing it
 

package.json

@@ -20,7 +20,8 @@
       "**/@types/qunit",
       "**/@types/rsvp",
       "**/ember-load-initializers",
-      "**/ember-load-initializers/**"
+      "**/ember-load-initializers/**",
+      "**/@ember/string"
     ]
   },
   "private": true,
@@ -40,7 +41,7 @@
     "test:file-daemon": "cd packages/file-daemon && yarn test",
     "test:file-daemon-client": "cd packages/file-daemon-client && yarn test",
     "test:builder-worker": "cd packages/builder-worker && yarn test",
-    "test:builder-node": "cd packages/builder-worker && yarn webpack && yarn qunit assets/node-test.js",
+    "test:builder-node": "cd packages/builder-node && yarn test",
     "acceptance-test": "npm-run-all acceptance-test:*",
     "acceptance-test:init": "rm -rf ./test-working && mkdir ./test-working",
     "acceptance-test:bundle": "cd ./test-working && node ../packages/builder-node/bin/install.js --project=.. @babel/core",
@@ -61,11 +62,23 @@
     "publish-pkgs": "aws s3 cp ./working/cdn/pkgs s3://catalogjs-pkgs --recursive",
     "release": "yarn pkg && yarn pub",
     "builder": "cd packages/builder-worker && yarn start",
-    "serve": "cd packages/test-app && yarn start",
-    "ui": "cd packages/ui && yarn start"
+    "serve:test-app": "cd packages/test-app && yarn start",
+    "serve:test-lib": "cd packages/test-lib && yarn start",
+    "serve:ember-app": "yarn start-server-and-test serve:embroider 'http://localhost:4250/.stage2-output' serve:file-daemon-ember-app",
+    "serve:ember-app-local-pkgs": "yarn start-server-and-test serve:embroider 'http://localhost:4250/.stage2-output' serve:file-daemon-ember-app-local-pkgs",
+    "serve:embroider": "cd packages/ember-app && yarn start",
+    "serve:file-daemon-ember-app": "cd packages/ember-app && yarn start:catalogjs",
+    "serve:file-daemon-ember-app-local-pkgs": "cd packages/ember-app && yarn start:catalogjs-local-pkgs",
+    "ui": "cd packages/ui && yarn start",
+    "ember-acceptance-test": "npm-run-all ember-acceptance-test:*",
+    "ember-acceptance-test:build": "cd packages/ember-app && yarn build",
+    "ember-acceptance-test:bundle-runtime": "node packages/builder-node/bin/install.js --project=. @babel/runtime/helpers/esm/defineProperty",
+    "ember-acceptance-test:bundle-deps": "node packages/builder-node/bin/install.js --project=`cat ./packages/ember-app/dist/.stage2-output` ember-resolver ember-load-initializers @glimmer/component ember-cli-app-version/initializer-factory",
+    "ember-acceptance-test:bundle-addons": "node packages/builder-node/bin/install.js --project=`cat ./packages/ember-app/dist/.stage2-output`/../.. ember-page-title/helpers/page-title ember-welcome-page/components/welcome-page"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5",
+    "start-server-and-test": "^1.11.0",
     "testem": "^3.1.0"
   },
   "resolutions": {

packages/builder-dom/main.ts

@@ -8,75 +8,78 @@ import { isReloadEvent } from "../builder-worker/src/client-reload";
 
 let uiWidth: number;
 
-// Note that the packages/ui ember app is responsible for the service worker
-// initialization and activation. At this point the service worker has already
-// been activated. The responsibility for this module is to render the ui's edge
-// route in an iframe, add a build reload-page listener, and respond to window positioning. requests.
-
-if (navigator.serviceWorker.controller) {
-  let iframe = document.createElement("iframe");
-  iframe.setAttribute("src", `${window.origin}/catalogjs/ui/#/edge`);
-  iframe.setAttribute("id", "catalogjs-ui");
-  iframe.setAttribute(
-    "style",
-    `position: fixed;
-   top: 0;
-   bottom: 0;
-   right: -100%;
-   height: 100vh;
-   border: none;
-   transition: transform 300ms;
-  `
-  );
-  if (!document.body) {
-    document.body = document.createElement("body");
+function handleUICommand(event: MessageEvent) {
+  if (event.origin !== window.origin) {
+    return;
+  }
+  let { data } = event;
+  if (isReloadEvent(data)) {
+    window.location.reload();
+    return;
   }
-  document.body.setAttribute("style", "overflow-x: hidden;");
-  document.body.append(iframe);
-  window.addEventListener("message", handleUICommand, false);
-  navigator.serviceWorker.addEventListener("message", handleUICommand);
-
-  (async () => {
-    await fetch("/register-client/reload");
-  })();
 
-  function handleUICommand(event: MessageEvent) {
-    if (event.origin !== window.origin) {
-      return;
-    }
-    let { data } = event;
-    if (isReloadEvent(data)) {
-      window.location.reload();
-      return;
+  if (isUIManagerEvent(data)) {
+    let iframe = document.getElementById("catalogjs-ui");
+    if (!iframe) {
+      throw new Error("bug: cannot find the catalogjs ui iframe");
     }
 
-    if (isUIManagerEvent(data)) {
-      let iframe = document.getElementById("catalogjs-ui");
-      if (!iframe) {
-        throw new Error("bug: cannot find the catalogjs ui iframe");
+    let { uiManager: command } = data;
+    if (command) {
+      switch (command.type) {
+        case "ready":
+          uiWidth = command.width;
+          iframe.style.width = `${command.width}px`;
+          iframe.style.right = `${-1 * command.width}px`;
+          break;
+        case "show":
+          iframe.style.transform = `translate(${-1 * uiWidth}px, 0)`;
+          break;
+        case "hide":
+          iframe.style.transform = `translate(0, 0)`;
+          break;
+        case "home":
+          location.href = "/catalogjs/ui/";
+          break;
+        default:
+          assertNever(command);
       }
+    }
+  }
+}
 
-      let { uiManager: command } = data;
-      if (command) {
-        switch (command.type) {
-          case "ready":
-            uiWidth = command.width;
-            iframe.style.width = `${command.width}px`;
-            iframe.style.right = `${-1 * command.width}px`;
-            break;
-          case "show":
-            iframe.style.transform = `translate(${-1 * uiWidth}px, 0)`;
-            break;
-          case "hide":
-            iframe.style.transform = `translate(0, 0)`;
-            break;
-          case "home":
-            location.href = "/catalogjs/ui/";
-            break;
-          default:
-            assertNever(command);
-        }
-      }
+// Note that the packages/ui ember app is responsible for the service worker
+// initialization and activation. At this point the service worker has already
+// been activated. The responsibility for this module is to render the ui's edge
+// route in an iframe, add a build reload-page listener, and respond to window
+// positioning requests.
+
+if (navigator.serviceWorker.controller) {
+  if (!document.getElementById("catalogjs-ui")) {
+    window.addEventListener("message", handleUICommand, false);
+    navigator.serviceWorker.addEventListener("message", handleUICommand);
+    let iframe = document.createElement("iframe");
+    iframe.setAttribute("src", `${window.origin}/catalogjs/ui/#/edge`);
+    iframe.setAttribute("id", "catalogjs-ui");
+    iframe.setAttribute(
+      "style",
+      `position: fixed;
+     top: 0;
+     bottom: 0;
+     right: -100%;
+     height: 100vh;
+     border: none;
+     transition: transform 300ms;
+    `
+    );
+    if (!document.body) {
+      document.body = document.createElement("body");
     }
+    document.body.setAttribute("style", "overflow-x: hidden;");
+    document.body.append(iframe);
+
+    (async () => {
+      await fetch("/register-client/reload");
+    })();
   }
 }

packages/builder-node/package.json

@@ -2,6 +2,9 @@
   "name": "@catalogjs/builder-node",
   "version": "0.0.1",
   "license": "MIT",
+  "scripts": {
+    "test": "qunit test/test-entrypoint.js"
+  },
   "dependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
@@ -18,6 +21,7 @@
     "@catalogjs/loader": "0.0.1",
     "@catalogjs/polyfills": "0.0.1",
     "@catalogjs/recipes": "0.0.1",
+    "@embroider/core": "^0.36.0",
     "@types/fs-extra": "^8.1.0",
     "@types/node-fetch": "^2.5.7",
     "@types/resolve": "^1.17.1",

packages/builder-node/src/build.ts

@@ -139,6 +139,7 @@ async function build() {
 
   let builder = Builder.forProjects(fs, projectRoots, recipesURL, {
     bundle: { assigner },
+    entrypoint: { suppressServiceWorkerLauncher: true },
   });
   await builder.build();
 }

packages/builder-node/src/install.ts

@@ -34,7 +34,7 @@ if (!pkgs || pkgs.filter(Boolean).length === 0) {
   );
   process.exit(1);
 }
-let projectDir = resolve(join(process.cwd(), project));
+let projectDir = resolve(process.cwd(), project);
 
 (async () => {
   // TODO this should probably come from the command line. the src cloning is a
@@ -56,6 +56,7 @@ let projectDir = resolve(join(process.cwd(), project));
   );
   let recipesPath = join(resolveNodePkg("@catalogjs/recipes"), "recipes");
   await fs.mount(recipesURL, new NodeFileSystemDriver(recipesPath));
+
   let builder = new Builder(fs, [builderRoot], recipesURL);
   await builder.build();