@ixon-cdk/svelte-builder 1.0.0-alpha.0

package/README.md

@@ -0,0 +1,3 @@
+# IXON Component Development Kit Svelte Builder
+
+This builder can be used with the IXON Component Development Kit (CDK). It contains build targets for compiling [Svelte](https://svelte.dev/) components into [webcomponents](https://developer.mozilla.org/en-US/docs/Web/Web_Components) (reusable custom elements) using [Rollup](https://github.com/sveltejs/rollup-plugin-svelte).

package/browser.js

@@ -0,0 +1,118 @@
+const fs = require("fs");
+const rollup = require("rollup");
+const preprocess = require("svelte-preprocess");
+const commonjs = require("@rollup/plugin-commonjs");
+const { nodeResolve } = require("@rollup/plugin-node-resolve");
+const svelte = require("rollup-plugin-svelte");
+const { terser } = require("rollup-plugin-terser");
+const path = require("path");
+const rimraf = require("rimraf");
+const { copyMetaFiles, watchMetaFiles, pascalCase } = 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));
+
+  // temporary entry file
+  const entryFileName = path.join(
+    path.dirname(require.resolve("@ixon-cdk/svelte-builder")),
+    `__temp_entry-${tag}.js`
+  );
+  const componentStatic = pascalCase(tag);
+  const entryFileContent = `import ${componentStatic} from '../../${inputFile}';\nexport default new ${componentStatic}();\n`;
+  fs.writeFileSync(entryFileName, entryFileContent, {
+    encoding: "utf8",
+    flag: "w",
+  });
+
+  // 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",
+  });
+
+  // component
+  const inputOptions = {
+    input: entryFileName,
+    plugins: [
+      svelte({
+        compilerOptions: {
+          customElement: true,
+          dev: !production,
+          immutable: true,
+          tag: tag,
+        },
+        preprocess: preprocess(),
+      }),
+      nodeResolve({ browser: true, dedupe: ["svelte"] }),
+      commonjs(),
+    ],
+  };
+  const outputOptions = {
+    sourcemap: true,
+    format: "iife",
+    name: "app",
+    file: outputFile,
+  };
+  const productionOutputOptions = {
+    ...outputOptions,
+    file: outputFile,
+    plugins: [terser()],
+  };
+  if (watch) {
+    const watchOptions = {
+      ...inputOptions,
+      output: production
+        ? [outputOptions, productionOutputOptions]
+        : [outputOptions],
+      watch: { exclude: ["node_modules/**"] },
+    };
+    const watcher = await rollup.watch(watchOptions);
+    watcher.close();
+    process.on("SIGINT", () => {
+      fs.unlinkSync(entryFileName);
+      process.exit();
+    });
+  } 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();
+    fs.unlinkSync(entryFileName);
+  }
+
+  /**
+   * Copy meta files (manifest and icon)
+   */
+  copyMetaFiles(inputDir, outputDir);
+  if (watch) {
+    watchMetaFiles(inputDir, () => {
+      copyMetaFiles(inputDir, outputDir);
+    });
+  }
+}
+
+module.exports = function runBuild(
+  inputFile,
+  outputFile,
+  tag,
+  production = true,
+  watch = false
+) {
+  return _build(inputFile, outputFile, tag, production, watch);
+};

package/index.js

@@ -0,0 +1,42 @@
+try {
+  require("module-alias/register");
+} catch {}
+
+const fs = require("fs");
+const path = require("path");
+const isPotentialCustomElementName = require("is-potential-custom-element-name");
+const { getArgv, 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 watch = !!argv.watch;
+
+  if (!input) {
+    logErrorMessage(
+      "Must supply an input file, relative to the workspace root."
+    );
+    process.exit();
+  }
+
+  if (!fs.existsSync(path.join(process.cwd(), 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`
+    );
+    process.exit();
+  }
+
+  if (buildTarget === "browser") {
+    require("./browser")(input, output, tag, true, watch);
+  }
+}
+
+main();

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ixon-cdk/svelte-builder",
+  "version": "1.0.0-alpha.0",
+  "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",
+    "node-sass": "^6.0.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.56.3",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "svelte": "^3.42.6",
+    "svelte-preprocess": "^4.9.4"
+  },
+  "peerDependencies": {
+    "@ixon-cdk/core": "^1.0.0-alpha.0"
+  }
+}