[FEAT] Implement Glimmer Components RFC

This PR turns the `@glimmer/component` package into an Ember addon, allowing it to work in both Ember.js and Glimmer.js applications. This works by keeping the `GlimmerComponent` class definition in a separate file that then gets imported by the Glimmer.js implementation in `src`, and is included in the Ember.js implementation via `addon/index.js`.
glimmerjs · Feb 9, 2019 · 5ec0400 · 5ec0400
1 parent ee4090d
commit 5ec0400
Show file tree

Hide file tree

Showing 86 changed files with 6,293 additions and 868 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,27 @@
 dist
+
+/.node
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
 **/node_modules/**
 **/tmp/**
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/
+/libpeerconnection.log
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+
+# ember-try
+**/.node_modules.ember-try/**
+**/bower.json.ember-try
+**/package.json.ember-try
diff --git a/.travis.yml b/.travis.yml
@@ -1,23 +1,44 @@
 language: node_js
 node_js:
-  - "8"
+  - '8'
 
 env:
   - MOZ_HEADLESS=1
 
-cache: yarn
+cache:
+  yarn: true
 
 addons:
   chrome: stable
   firefox: latest
 
 before_install:
-  - "curl -o- -L https://yarnpkg.com/install.sh | bash -s --"
+  - 'curl -o- -L https://yarnpkg.com/install.sh | bash -s --'
   - export PATH="$HOME/.yarn/bin:$PATH"
 
 install:
   - yarn install --non-interactive
 
 script:
-  - yarn tslint
-  - yarn test
+  # Usually, it's ok to finish the test scenario without reverting
+  #  to the addon's original dependency state, skipping "cleanup".
+  - yarn test:ember $EMBER_TRY_SCENARIO --skip-cleanup
+
+jobs:
+  fail_fast: true
+
+  include:
+    - stage: Glimmer Tests
+      name: Package Tests
+      script: yarn test
+    - name: Lint
+      script: yarn tslint
+
+    - stage: Ember Tests
+      name: Node
+      script: yarn test:ember:node
+    - env: EMBER_TRY_SCENARIO=ember-default
+    - env: EMBER_TRY_SCENARIO=ember-release
+    - env: EMBER_TRY_SCENARIO=ember-beta
+    - env: EMBER_TRY_SCENARIO=ember-canary
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.4
diff --git a/.watchmanconfig b/.watchmanconfig
@@ -0,0 +1,3 @@
+{
+  "ignore_dirs": ["tmp", "dist"]
+}
diff --git a/README.md b/README.md
@@ -5,9 +5,9 @@ packages, so this meta-repo exists to help you find what you're looking for.
 
 ## Resources
 
-* [Guides](https://glimmerjs.com/guides)
-* [API Docs](https://glimmerjs.com/api/)
-* [Glimmer Playground](https://glimmer-playground.netlify.com)
+- [Guides](https://glimmerjs.com/guides)
+- [API Docs](https://glimmerjs.com/api/)
+- [Glimmer Playground](https://glimmer-playground.netlify.com)
 
 ## Packages
 
@@ -17,22 +17,24 @@ Glimmer.js is the developer-facing API on top of the low-level [Glimmer VM](http
 
 These packages are imported and used by Glimmer developers directly.
 
-* [`@glimmer/application`] - user-friendly wrapper around the Glimmer VM environment
-* [`@glimmer/component`] - defines the Glimmer component base class and component lifecycle
-* [`@glimmer/web-component`] - addon for mounting Glimmer components as Web Components
-* [`@glimmer/application-test-helpers`] - helpers for testing Glimmer components
+- [`@glimmer/application`] - user-friendly wrapper around the Glimmer VM environment
+- [`@glimmer/component`] - defines the Glimmer component base class and component lifecycle
+- [`@glimmer/tracking`] - defines the Glimmer property change tracking system
+- [`@glimmer/web-component`] - addon for mounting Glimmer components as Web Components
+- [`@glimmer/application-test-helpers`] - helpers for testing Glimmer components
 
 [`@glimmer/application`]: https://github.com/glimmerjs/glimmer.js/tree/master/packages/%40glimmer/application
 [`@glimmer/component`]: https://github.com/glimmerjs/glimmer.js/tree/master/packages/%40glimmer/component
+[`@glimmer/tracking`]: https://github.com/glimmerjs/glimmer.js/tree/master/packages/%40glimmer/tracking
 [`@glimmer/web-component`]: https://github.com/glimmerjs/glimmer-web-component
 [`@glimmer/application-test-helpers`]: https://github.com/glimmerjs/glimmer.js/tree/master/packages/%40glimmer/application-test-helpers
 
 ### Internals
 
 These packages are used internally by Glimmer but may be useful for more advanced users.
 
-* [`@glimmer/di`] - lightweight dependency injection library used by `@glimmer/application`
-* [`@glimmer/resolver`] - resolver used by `@glimmer/application` to look up component modules
+- [`@glimmer/di`] - lightweight dependency injection library used by `@glimmer/application`
+- [`@glimmer/resolver`] - resolver used by `@glimmer/application` to look up component modules
 
 [`@glimmer/di`]: https://github.com/glimmerjs/glimmer-di
 [`@glimmer/resolver`]: https://github.com/glimmerjs/glimmer-resolver
@@ -42,8 +44,8 @@ These packages are used internally by Glimmer but may be useful for more advance
 These packages are used for building Glimmer apps, and aren't intended to run in
 the user's browser.
 
-* [`@glimmer/application-pipeline`] - Broccoli-based build pipeline for Glimmer apps
-* [`@glimmer/resolution-map-builder`] - utilities for building the resolution map used by `@glimmer-resolver`
+- [`@glimmer/application-pipeline`] - Broccoli-based build pipeline for Glimmer apps
+- [`@glimmer/resolution-map-builder`] - utilities for building the resolution map used by `@glimmer-resolver`
 
 [`@glimmer/application-pipeline`]: https://github.com/glimmerjs/glimmer-application-pipeline
 [`@glimmer/resolution-map-builder`]: https://github.com/glimmerjs/resolution-map-builder
diff --git a/build/broccoli/build-packages.js b/build/broccoli/build-packages.js
@@ -23,7 +23,10 @@ module.exports = function buildPackages(es2017, matrix) {
   let es5 = transpileToES5(es2017);
   let targets = { es5, es2017 };
 
+  // We ignore the `@glimmer/blueprint` tree as it is ember-only, and is picked
+  // up later on in the build process.
   let packages = project.packages
+    .filter(pkg => pkg.name !== '@glimmer/blueprint')
     .map(buildPackage);
 
   packages = flatten(packages);
@@ -32,24 +35,10 @@ module.exports = function buildPackages(es2017, matrix) {
   return packages;
 
   function buildPackage(pkg) {
-    let pkgName = pkg.name;
-    let builds;
-
-    // The blueprint package is structured differently from other packages, so
-    // we just copy it over verbatim to the build output.
-    if (pkgName === '@glimmer/blueprint') {
-      builds = [funnel(`packages/${pkgName}`, {
-        destDir: `${pkgName}/`,
-        exclude: ['**/node_modules/**']
-      })];
-    } else {
-      builds = buildMatrix(pkgName, matrix);
-    }
-
     return [
-      writePackageJSON(pkgName),
-      writeLicense(`${pkgName}/LICENSE`),
-      ...builds
+      writePackageJSON(pkg.name),
+      writeLicense(`${pkg.name}/LICENSE`),
+      ...buildMatrix(pkg.name, matrix)
     ];
   }
 

diff --git a/build/broccoli/optimize.js b/build/broccoli/optimize.js
@@ -1,8 +1,6 @@
 'use strict';
 
 const babel = require('broccoli-babel-transpiler');
-const stripGlimmerUtils = require('babel-plugin-strip-glimmer-utils');
-const debugMacros = require('babel-plugin-debug-macros').default;
 
 /**
  * Optimizes out Glimmer utility functions and strips debug code with a set of
@@ -12,17 +10,22 @@ module.exports = function(jsTree) {
   let isProduction = process.env.EMBER_ENV === 'production';
 
   let plugins = [
-    [debugMacros, {
-      envFlags: {
-        source: '@glimmer/env',
-        flags: {
-          DEBUG: !isProduction,
-          CI: !!process.env.CI
-        }
-      },
+    [require.resolve('babel-plugin-debug-macros'), {
       debugTools: {
+        isDebug: !isProduction,
         source: '@glimmer/debug'
       },
+
+      flags: [
+        {
+          source: '@glimmer/env',
+          flags: {
+            DEBUG: !isProduction,
+            CI: !!process.env.CI
+          }
+        }
+      ],
+
       externalizeHelpers: {
         module: true
       }
@@ -32,7 +35,7 @@ module.exports = function(jsTree) {
   if (isProduction) {
     plugins = [
       ...plugins,
-      [stripGlimmerUtils, {
+      [require.resolve('babel-plugin-strip-glimmer-utils'), {
         bindings: ['expect', 'unwrap'],
         source: '@glimmer/util'
       }]

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -66,9 +66,22 @@ module.exports = function(_options) {
     ];
   }
 
+  // Include any Ember Addon files, without src (Glimmer files)
+  let emberTree = funnel('packages/', {
+    exclude: [
+      '**/node_modules',
+      '**/tmp',
+      '**/types',
+      '**/dist',
+      '**/src',
+      '**/test',
+      '*/*/index.ts'
+    ]
+  });
+
   // Third, build our module/ES combinations for each package, and their tests.
   let packagesTree = buildPackages(jsTree, matrix);
   let testsTree = buildTests(tsTree, jsTree, packagesTree);
 
-  return merge([packagesTree, testsTree]);
+  return merge([packagesTree, testsTree, emberTree], { overwrite: true });
 }
diff --git a/package.json b/package.json
@@ -9,16 +9,18 @@
     "start": "ember serve",
     "test": "ember test && ember test --env production",
     "test:node": "bin/run-node-tests.js",
-    "problems": "tsc -p tsconfig.json --noEmit",
-    "tslint": "tslint --project tsconfig.json"
+    "test:ember": "yarn workspace @glimmer/component ember try:one",
+    "test:ember:node": "yarn workspace @glimmer/component test:node",
+    "tslint": "tslint --project tsconfig.json",
+    "problems": "tsc -p tsconfig.json --noEmit"
   },
   "workspaces": [
     "packages/@glimmer/*"
   ],
   "devDependencies": {
     "@types/qunit": "^2.0.31",
     "amd-name-resolver": "^1.0.0",
-    "babel-plugin-debug-macros": "^0.1.11",
+    "babel-plugin-debug-macros": "^0.2.0",
     "babel-plugin-strip-glimmer-utils": "^0.1.1",
     "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
     "babel-plugin-transform-proto-to-assign": "^6.23.0",

diff --git a/packages/@glimmer/application-test-helpers/src/app-builder.ts b/packages/@glimmer/application-test-helpers/src/app-builder.ts
@@ -3,7 +3,6 @@ import Resolver, {
   ResolverConfiguration
 } from "@glimmer/resolver";
 import { Dict, ModuleLocator, TemplateLocator } from "@glimmer/interfaces";
-import { FactoryDefinition } from "@glimmer/di";
 import defaultResolverConfiguration from "./default-resolver-configuration";
 import { precompile } from "./compiler";
 import Application, {
@@ -36,7 +35,7 @@ export interface AppBuilderOptions<T> {
   document?: SimpleDocument;
 }
 
-export interface ComponentFactory extends FactoryDefinition<unknown> {}
+export interface ComponentFactory {}
 
 export class TestApplication extends Application {
   rootElement: Element;
@@ -106,7 +105,7 @@ export class AppBuilder<T extends TestApplication> {
       this.options.resolverConfiguration || defaultResolverConfiguration;
     resolverConfiguration.app = resolverConfiguration.app || {
       name: this.rootName,
-      rootName: this.rootName
+      rootName: this.rootName,
     };
 
     let registry = new BasicModuleRegistry(this.modules);
@@ -152,7 +151,7 @@ export class AppBuilder<T extends TestApplication> {
       meta[locator.module] = {
         v: vmHandle,
         h: handle,
-        table: template.symbolTable
+        table: template.symbolTable,
       };
     });
 
@@ -176,8 +175,8 @@ export class AppBuilder<T extends TestApplication> {
       meta,
       heap: {
         table: heap.table,
-        handle: heap.handle
-      }
+        handle: heap.handle,
+      },
     };
 
     return new BytecodeLoader({ bytecode, data });
@@ -209,7 +208,7 @@ export class AppBuilder<T extends TestApplication> {
       loader,
       renderer,
       rootName: this.rootName,
-      document: this.options.document
+      document: this.options.document,
     });
 
     let rootElement = doc.createElement("div");