feat: use es modules and chunks

fixes #29
blinkk · Feb 22, 2022 · 10ff9e3 · 10ff9e3
1 parent 9a4f902
commit 10ff9e3
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 51 deletions.
diff --git a/amagaki.ts b/amagaki.ts
@@ -21,16 +21,22 @@ export default (pod: Pod) => {
     beautifyContainer: false,
     head: {
       siteName: 'Starter',
-      scripts: [pod.staticFile('/dist/js/main.min.js')],
+      scripts: [
+        {
+          href: pod.staticFile('/dist/chunks/main.js'),
+          module: true,
+        },
+      ],
       icon: pod.staticFile('/src/static/images/amagaki.png'),
       stylesheets: [
         'https://fonts.googleapis.com/css?family=Manrope:400,500,600,700|Material+Icons&amp;display=swap',
         pod.staticFile('/dist/css/main.css'),
       ],
     },
     partialPaths: {
+      module: true,
       css: ['/dist/css/${partial.partial}/${partial.partial}.css'],
-      js: ['/dist/js/partials/${partial.partial}/${partial.partial}.js'],
+      js: ['/dist/chunks/partials/${partial.partial}/${partial.partial}.js'],
       view: ['/src/partials/${partial.partial}/${partial.partial}.tsx'],
     },
   });
@@ -50,8 +56,8 @@ export default (pod: Pod) => {
         staticDir: '/dist/css/',
       },
       {
-        path: '/static/js/',
-        staticDir: '/dist/js/',
+        path: '/static/chunks/',
+        staticDir: '/dist/chunks/',
       },
     ],
     environments: {

diff --git a/gulpfile.ts b/gulpfile.ts
@@ -1,20 +1,30 @@
-import * as esbuild from 'esbuild';
-
-import autoprefixer from 'gulp-autoprefixer';
 import {exec} from 'child_process';
+import autoprefixer from 'gulp-autoprefixer';
+import * as esbuild from 'esbuild';
+import fs from 'fs';
+import glob from 'glob';
+import path from 'path';
 import gulp from 'gulp';
 import sass from 'gulp-dart-sass';
 
 const ENTRIES = {
   js: {
-    tsc_out: ['./dist/tsc/main.js'],
-    out: './dist/js/main.min.js',
+    // Files first processed by `tsc`, and later output by `esbuild`.
+    entrypoints: () => {
+      return [
+        './dist/tsc/main.js',
+        ...glob.sync('./dist/tsc/components/**/*.js'),
+        ...glob.sync('./dist/tsc/partials/**/*.js'),
+      ];
+    },
+    // Where to output chunks generated by `esbuild`.
+    outDir: './dist/chunks/',
     watch: ['./src/**/*.ts', './src/**/*.tsx'],
   },
   sass: {
     includePaths: ['./node_modules/', './src/sass/', './src/'],
     src: ['./src/partials/**/*.sass', './src/sass/*.sass'],
-    out: './dist/css/',
+    outDir: './dist/css/',
     watch: ['./src/**/*.sass'],
   },
 };
@@ -29,21 +39,24 @@ const runEsBuild = async prod => {
   return new Promise<void>((resolve, reject) => {
     exec('tsc', async (error, stderr) => {
       if (stderr) {
-        console.error('Typescript errors');
+        console.error('TypeScript errors');
         console.error(stderr);
         reject();
       } else {
         await esbuild.build({
-          entryPoints: ENTRIES.js.tsc_out,
-          outfile: ENTRIES.js.out,
           bundle: true,
-          platform: 'browser',
-          minify: prod,
-          jsxFactory: 'preact.h',
-          jsxFragment: 'preact.Fragment',
+          chunkNames: 'chunks/[name]-[hash]-min',
           define: {
             ...(prod && {'process.env.NODE_ENV': "'production'"}),
           },
+          entryPoints: ENTRIES.js.entrypoints(),
+          format: 'esm',
+          jsxFactory: 'preact.h',
+          jsxFragment: 'preact.Fragment',
+          minify: prod,
+          outdir: ENTRIES.js.outDir,
+          platform: 'browser',
+          splitting: true,
         });
         resolve();
       }
@@ -66,7 +79,7 @@ gulp.task('build:sass', () => {
     )
     .on('error', sass.logError)
     .pipe(autoprefixer())
-    .pipe(gulp.dest(ENTRIES.sass.out));
+    .pipe(gulp.dest(ENTRIES.sass.outDir));
 });
 
 gulp.task('watch:sass', () => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,28 +29,28 @@
   "dependencies": {
     "@amagaki/amagaki": "^1.12.1",
     "@amagaki/amagaki-engine-preact": "^1.1.1",
-    "@amagaki/amagaki-plugin-page-builder": "^3.4.0",
+    "@amagaki/amagaki-plugin-page-builder": "^3.5.0",
     "@blinkk/degu": "^2.0.0",
     "@github/details-dialog-element": "^3.1.3",
     "browser-sync": "^2.27.5",
     "esbuild": "^0.13.15",
-    "glob": "^7.1.7",
     "gts": "^3.1.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^8.0.0",
     "gulp-dart-sass": "^1.0.2",
     "nodemon": "^2.0.12",
     "npm-run-all": "^4.1.5",
     "nunjucks": "^3.2.3",
-    "quicklink": "^2.2.0",
     "preact": "^10.6.4",
     "preact-render-to-string": "^5.1.19",
+    "quicklink": "^2.2.0",
     "sucrase": "^3.20.3",
     "typescript": "^4.5.2"
   },
   "devDependencies": {
     "@types/gulp": "^4.0.9",
     "@types/gulp-autoprefixer": "0.0.33",
-    "@types/gulp-dart-sass": "^1.0.1"
+    "@types/gulp-dart-sass": "^1.0.1",
+    "glob": "^7.2.0"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/gts/tsconfig-google.json",
+  "extends": "gts/tsconfig-google.json",
   "compilerOptions": {
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
@@ -17,18 +17,8 @@
     "rootDir": "src/",
     "skipLibCheck": true,
     "target": "es2018",
-    "lib": [
-      "es2018",
-      "dom"
-    ],
+    "lib": ["es2018", "dom"]
   },
-  "include": [
-    "src/main.tsx",
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "test/**/*.ts",
-  ],
-  "exclude": [
-    "node_modules",
-  ],
+  "include": ["src/main.tsx", "src/**/*.ts", "src/**/*.tsx", "test/**/*.ts"],
+  "exclude": ["node_modules"]
 }