@ixon-cdk/static-builder 1.0.0-alpha.0 → 1.0.0-alpha.12

package/README.md

@@ -1,3 +1,3 @@
-# IXON Component Development Kit HTMLElement Builder
+# IXON Component Development Kit Static Builder
 
-This builder can be used with the IXON Component Development Kit (CDK). It contains build targets for building [webcomponents](https://developer.mozilla.org/en-US/docs/Web/Web_Components) (reusable custom elements) using [Rollup](https://rollupjs.org/guide/en/).
+This builder can be used with the IXON Component Development Kit (CDK). It contains build targets for building [webcomponents](https://developer.mozilla.org/en-US/docs/Web/Web_Components) (reusable custom elements) using [Vite](https://vitejs.dev/).

package/browser.js

@@ -1,77 +1,60 @@
-const fs = require("fs");
-const rollup = require("rollup");
-const commonjs = require("@rollup/plugin-commonjs");
-const { nodeResolve } = require("@rollup/plugin-node-resolve");
-const { terser } = require("rollup-plugin-terser");
-const path = require("path");
-const rimraf = require("rimraf");
-const { copyMetaFiles, watchMetaFiles } = require("@ixon-cdk/core");
+const path = require('path');
+const { build } = require('vite');
+const {
+  getRootDir,
+  cleanDir,
+  watchInputDir,
+  writeDemoFile,
+  copyAssets,
+  watchAssets,
+} = require('@ixon-cdk/core');
 
-async function _build(inputFile, outputFile, tag, production, watch) {
-  const inputDir = path.dirname(path.join(process.cwd(), inputFile));
-  const outputDir = path.dirname(path.join(process.cwd(), outputFile));
+async function _build(inputFile, outputFile, tag, assets, production, watch) {
+  const inputDir = path.dirname(path.join(getRootDir(), inputFile));
+  const outputDir = path.dirname(path.join(getRootDir(), outputFile));
 
-  // clean
-  if (fs.existsSync(outputDir)) {
-    rimraf.sync(outputDir);
-  }
-
-  // output folder
-  fs.mkdirSync(outputDir, { recursive: true });
-
-  // demo file
-  const demoFileContent = `<meta charset="utf-8">\n<title>${tag} demo</title>\n<script src="./${path.basename(
-    outputFile
-  )}"></script>\n\n\n<${tag}></${tag}>\n\n`;
-  fs.writeFileSync(`${outputDir}/demo.html`, demoFileContent, {
-    encoding: "utf8",
-    flag: "w",
-  });
+  cleanDir(outputDir);
+  writeDemoFile(tag, outputDir, outputFile);
 
-  // component
-  const inputOptions = {
-    input: inputFile,
-    plugins: [nodeResolve({ browser: true, dedupe: ["svelte"] }), commonjs()],
-  };
-  const outputOptions = {
-    sourcemap: true,
-    format: "iife",
-    name: "app",
-    file: outputFile,
-  };
-  const productionOutputOptions = {
-    ...outputOptions,
-    file: outputFile,
-    plugins: [terser()],
+  const config = {
+    root: getRootDir(),
+    mode: production ? 'production' : 'development',
+    build: {
+      lib: {
+        entry: inputFile,
+        formats: ['iife'],
+        name: 'app',
+        fileName: () => `${tag}.min.js`,
+      },
+      sourcemap: true,
+      outDir: outputDir,
+      emptyOutDir: false,
+      rollupOptions: {
+        output: {
+          inlineDynamicImports: true,
+        },
+      },
+    },
+    write: true,
+    plugins: [],
   };
-  if (watch) {
-    const watchOptions = {
-      ...inputOptions,
-      output: production
-        ? [outputOptions, productionOutputOptions]
-        : [outputOptions],
-      watch: { exclude: ["node_modules/**"] },
-    };
-    const watcher = await rollup.watch(watchOptions);
-    watcher.close();
-  } else {
-    const bundle = await rollup.rollup(inputOptions);
-    await bundle.generate(outputOptions);
-    await bundle.write(outputOptions);
-    if (production) {
-      await bundle.generate(productionOutputOptions);
-      await bundle.write(productionOutputOptions);
-    }
-    await bundle.close();
-  }
 
-  /**
-   * Copy meta files (manifest and icon)
-   */
-  copyMetaFiles(inputDir, outputDir);
+  // build
+  await build(config);
+  copyAssets(assets, inputDir, outputDir);
+
+  // watch source files
   if (watch) {
-    watchMetaFiles(inputDir, () => {
-      copyMetaFiles(inputDir, outputDir);
+    watchAssets(assets, inputDir, outputDir);
+    await watchInputDir(inputDir, (isAsset) => {
+      if (isAsset) {
+        // do nothing
+      } else {
+        build(config);
+      }
+    });
+    process.on('SIGINT', () => {
+      process.exit();
     });
   }
 }
@@ -80,8 +63,9 @@ module.exports = function runBuild(
   inputFile,
   outputFile,
   tag,
+  assets,
   production = true,
-  watch = false
+  watch = false,
 ) {
-  return _build(inputFile, outputFile, tag, production, watch);
+  return _build(inputFile, outputFile, tag, assets, production, watch);
 };

package/index.js

@@ -1,41 +1,44 @@
 try {
-  require("module-alias/register");
-} catch {}
+  require('module-alias/register');
+} catch {
+  // do nothing
+}
 
-const fs = require("fs");
-const path = require("path");
-const isPotentialCustomElementName = require("is-potential-custom-element-name");
-const { getArgv, logErrorMessage } = require("@ixon-cdk/core");
+const fs = require('fs');
+const path = require('path');
+const isPotentialCustomElementName = require('is-potential-custom-element-name');
+const { getArgv, getRootDir, logErrorMessage } = require('@ixon-cdk/core');
 
 function main() {
   const argv = getArgv();
   const buildTarget = argv._[0];
   const tag = argv._[1];
-  const input = argv.input;
-  const output = argv.output || "dist/bundle/main.min.js";
+  const { input } = argv;
+  const output = argv.output || 'dist/bundle/main.min.js';
+  const assets = JSON.parse(argv.assets || '[]');
   const watch = !!argv.watch;
 
   if (!input) {
     logErrorMessage(
-      "Must supply an input file, relative to the workspace root."
+      'Must supply an input file, relative to the workspace root.',
     );
     process.exit();
   }
 
-  if (!fs.existsSync(path.join(process.cwd(), input))) {
+  if (!fs.existsSync(path.join(getRootDir(), input))) {
     logErrorMessage(`Input file '${input}' does not exist.`);
     process.exit();
   }
 
   if (!isPotentialCustomElementName(tag)) {
     logErrorMessage(
-      `Custom element name '${tag}' is invalid. See https://html.spec.whatwg.org/multipage/custom-elements.html#prod-potentialcustomelementname`
+      `Custom element name '${tag}' is invalid. See https://html.spec.whatwg.org/multipage/custom-elements.html#prod-potentialcustomelementname`,
     );
     process.exit();
   }
 
-  if (buildTarget === "browser") {
-    require("./browser")(input, output, tag, true, watch);
+  if (buildTarget === 'browser') {
+    require('./browser')(input, output, tag, assets, true, watch);
   }
 }
 

package/package.json

@@ -1,19 +1,15 @@
 {
   "name": "@ixon-cdk/static-builder",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.12",
   "description": "",
   "main": "index.js",
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
     "is-potential-custom-element-name": "^1.0.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.56.3",
-    "rollup-plugin-terser": "^7.0.2"
+    "vite": "^2.6.12"
   },
   "peerDependencies": {
-    "@ixon-cdk/core": "^1.0.0-alpha.0"
+    "@ixon-cdk/core": "^1.0.0-alpha.12"
   }
 }