Fix build ux (#229)

* chore(build): use default import for html * chore(example): use esmodule interop for webpack html loader * chore(build): update all packages css bundling * chore(all): update doc & dependencies * chore(example): update example code * chore(build): fix datepicker build, revert to multiple modules * chore(core): revert to multiple modules * chore(textarea): revert to multi-modules build * chore(switch): revert to multi-modules build * chore(slider): revert to multi-modules build * chore(select): revert to multi-modules build * chore(radio): revert to multi-modules build * chore(list): revert to multi-modules build * chore(input-info): revert to multi-modules build * chore(input): revert to multi-modules build * chore(icons): revert to multi-modules build * chore(grid): revert to multi-modules build * chore(form): revert to multi-modules build * chore(chip-input): revert to multi-modules build * chore(checkbox): revert to multi-modules build * chore(card): revert to multi-modules build * chore(button): revert to multi-modules build * chore(deps): update main deps * chore(example): update example app config * chore(build): ensure build typings for all packages * chore(components): revert to multi-modules build * chore(examples): update example app config
aurelia · Dec 3, 2019 · 64ec9bb · 64ec9bb
1 parent 477b4df
commit 64ec9bb
Show file tree

Hide file tree

Showing 146 changed files with 3,680 additions and 78,319 deletions.
diff --git a/README.md b/README.md
@@ -60,14 +60,26 @@ npm run build:dev -- --environment target_dir: path/to/my/dir
 npm run build:dev:watch -- --environment target_dir: path/to/my/dir
 ```
 
-### Run a test app
+### Run a test app which emulates dependencies installation
+To run the test app, first make sure you built all the packages via the instruction of how to build above. Then open a shell at root of this project and copy paste the following:
+```shell
+cd app
+npm ci
+npm run dev
+```
+
+### Run a test app with direct source bundling
+
+To run the test app, with all dependencies pointing to the packages source code, first make sure you could run in previous step, then do:
+1. Uncomment line 33 to line 65 in webpack.config.js in `app` folder
+2. Open a shell at root of this project and run:
 
-To run the test app, with all dependencies pointing to the packages source code, do:
 ```shell
 cd app
 npm ci
 npm run dev
 ```
+
 This will use `webpack-dev-server` and `webpack` to alias all `ux` dependencies to the source in `pakcages` folder.
 
 ### Testing from the project's root directory

diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -11,7 +11,24 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "aurelia-logging-console": "^1.1.1"
+    "@aurelia-ux/button": "file:../packages/button",
+    "@aurelia-ux/card": "file:../packages/card",
+    "@aurelia-ux/checkbox": "file:../packages/checkbox",
+    "@aurelia-ux/chip-input": "file:../packages/chip-input",
+    "@aurelia-ux/core": "file:../packages/core",
+    "@aurelia-ux/datepicker": "file:../packages/datepicker",
+    "@aurelia-ux/grid": "file:../packages/grid",
+    "@aurelia-ux/icons": "file:../packages/icons",
+    "@aurelia-ux/input": "file:../packages/input",
+    "@aurelia-ux/input-info": "file:../packages/input-info",
+    "@aurelia-ux/list": "file:../packages/list",
+    "@aurelia-ux/radio": "file:../packages/radio",
+    "@aurelia-ux/select": "file:../packages/select",
+    "@aurelia-ux/slider": "file:../packages/slider",
+    "@aurelia-ux/switch": "file:../packages/switch",
+    "@aurelia-ux/textarea": "file:../packages/textarea",
+    "aurelia-logging-console": "^1.1.1",
+    "moment": "^2.24.0"
   },
   "devDependencies": {
     "aurelia-loader-webpack": "^2.2.1",

diff --git a/app/src/main.ts b/app/src/main.ts
@@ -10,20 +10,21 @@ async function configure(aurelia: Aurelia): Promise<void> {
     .standardConfiguration()
     .plugin(PLATFORM.moduleName('@aurelia-ux/core'))
     .plugin(PLATFORM.moduleName('@aurelia-ux/button'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/textarea'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/switch'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/slider'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/select'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/radio'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/list'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/input-info'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/input'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/icons'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/grid'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/datepicker'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/chip-input'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/checkbox'))
     .plugin(PLATFORM.moduleName('@aurelia-ux/card'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/checkbox'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/chip-input'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/datepicker'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/form'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/grid'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/icons'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/input'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/input-info'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/list'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/radio'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/select'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/slider'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/switch'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/textarea'))
 
   await aurelia.start();
   await aurelia.setRoot(PLATFORM.moduleName('app'), document.body);

diff --git a/app/tsconfig.json b/app/tsconfig.json
@@ -1,12 +1,17 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "target": "esnext",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
     "paths": {
       "aurelia-framework": [
         "../node_modules/aurelia-framework"
       ]
-    }
+    },
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
   },
   "exclude": []
 }
diff --git a/app/webpack.config.js b/app/webpack.config.js
@@ -15,19 +15,32 @@ module.exports = function({ production = '' } = {}) {
       modules: [
         path.resolve(__dirname, 'src'),
         path.resolve(__dirname, 'node_modules'),
-        // root node modules for common aurelia packages
-        path.resolve(__dirname, '../node_modules')
       ],
       alias: {
         'src': path.resolve(__dirname, 'src'),
         // alias all aurelia packages to parent node_modules,
         // so packages & core modules will use the same version of core modules
         ...([
+          'polyfills',
+          'dependency-injection',
           'loader',
           'pal',
           'pal-browser',
           'metadata',
-          'logging'
+          'logging',
+          'binding',
+          'path',
+          'framework',
+          'history',
+          'history-browser',
+          'event-aggregator',
+          'router',
+          'route-recognizer',
+          'templating',
+          'templating-binding',
+          'templating-resources',
+          'templating-router',
+          'task-queue',
         ].reduce(
           /**
            * @param {Record<string, string>} map
@@ -60,10 +73,11 @@ module.exports = function({ production = '' } = {}) {
           'textarea',
         ].reduce((map, packageName) => {
           const mappedPackagedName = `@aurelia-ux/${packageName}`;
-          map[mappedPackagedName] = path.resolve(__dirname, `../packages/${packageName}/src`)
+          map[mappedPackagedName] = path.resolve(__dirname, `../packages/${packageName}/src`);
           return map;
         }, {}))
-      }
+      },
+
     },
     entry: {
       app: './src/main.ts'
@@ -79,24 +93,89 @@ module.exports = function({ production = '' } = {}) {
           loader: 'html-loader'
         },
         {
-          test: /\.css$/,
-          loader: 'css-loader'
-        }
+          test: /\.css$/i,
+          issuer: [{ not: [{ test: /\.html$/i }] }],
+          use: ['style-loader', 'css-loader']
+        },
+        {
+          test: /\.css$/i,
+          issuer: [{ test: /\.html$/i }],
+          // CSS required in templates cannot be extracted safely
+          // because Aurelia would try to require it again in runtime
+          use: ['css-loader']
+        },
       ]
     },
     plugins: [
       new AureliaWebpackPlugin.AureliaPlugin({
-        config: [
-          "defaultBindingLanguage",
-          // "router",
-          // "history",
-          "defaultResources",
-          "eventAggregator",
-          "developmentLogging",
-        ],
         aureliaApp: undefined,
         entry: undefined,
-        noModulePathResolve: true
+        dist: 'es2015',
+      }),
+      // note that following config is for webpack aliasing to source code
+      // it won't be necessary for real app
+      new AureliaWebpackPlugin.ModuleDependenciesPlugin({
+        '@aurelia-ux/button': [
+          './ux-button.html'
+        ],
+        '@aurelia-ux/card': [
+          './ux-card-action-row.html',
+          './ux-card-content.html',
+          './ux-card-footer.html',
+          './ux-card-header.html',
+          './ux-card.html'
+        ],
+        '@aurelia-ux/checkbox': [
+          './ux-checkbox.html'
+        ],
+        '@aurelia-ux/chip-input': [
+          './ux-chip-input.html',
+          './ux-chip.html'
+        ],
+        "@aurelia-ux/datepicker": [
+          "./ux-calendar.html",
+          "./ux-datepicker.html",
+          "./ux-picker-dialog.html",
+          "./ux-year-list.html",
+        ],
+        '@aurelia-ux/form': [
+          './ux-field.html',
+          './ux-form.html'
+        ],
+        '@aurelia-ux/grid': [
+          './ux-grid-cell.html',
+          './ux-grid.html'
+        ],
+        '@aurelia-ux/icons': [
+          './ux-icon.html'
+        ],
+        '@aurelia-ux/input': [
+          './ux-input.html'
+        ],
+        '@aurelia-ux/input-info': [
+          './ux-input-info.html'
+        ],
+        '@aurelia-ux/list': [
+          './ux-list-item.html',
+          './ux-list.html'
+        ],
+        '@aurelia-ux/radio': [
+          './ux-radio.html'
+        ],
+        '@aurelia-ux/select': [
+          './ux-optgroup.html',
+          './ux-option.html',
+          './ux-select.html'
+        ],
+        '@aurelia-ux/slider': [
+          './ux-slider.html'
+        ],
+        '@aurelia-ux/switch': [
+          './ux-switch.html'
+        ],
+        '@aurelia-ux/textarea': [
+          './ux-textarea.html'
+        ],
       }),
       new HtmlWebpackPlugin({