@soleil-se/build-app 1.4.2 → 1.6.0

package/index.js

@@ -6,7 +6,7 @@ import { getTimestamp, logError, logInfo, logStartup } from '@soleil-se/build-ut
 import chalk from 'chalk';
 
 import {
-  input, type, manifest, addonName, env, projectRoot, rollup, watchPaths, eslintPaths,
+  input, manifest, addonName, env, projectRoot, rollup, watchPaths, eslintPaths,
 } from './config.js';
 
 import { clean, copy, files, zip, eslint } from './utils/index.js';
@@ -14,7 +14,6 @@ import { client, server } from './rollup/index.js';
 import { activate, upload, sign } from './requests/index.js';
 import config from './config/index.js';
 
-const cssOutput = type === 'webapp' ? './dist/src/css/app.css' : './dist/src/resource/client/app.css';
 const zipPath = `./dist/${manifest.id}-${manifest.version}.zip`;
 
 async function main() {
@@ -36,7 +35,7 @@ async function main() {
       debug: args.debug,
       bundled: manifest.bundled,
       cache: args.cache,
-      cssOutput,
+      extractCss: true,
     })),
     task('client', client({
       input: input.client,
@@ -45,7 +44,7 @@ async function main() {
       globals: rollup?.client?.globals,
       debug: args.debug,
       cache: args.cache,
-      cssOutput,
+      extractCss: true,
     })),
     task('hooks', server({
       input: input.hooks,
@@ -53,7 +52,7 @@ async function main() {
       bundled: manifest.bundled,
       debug: args.debug,
       cache: args.cache,
-      cssOutput,
+      extractCss: true,
     })),
     task('config', config({ src: input.config, dest: './dist/src/config', cache: args.cache, debug: args.debug })),
     task('globalConfig', config({ src: input.globalConfig, dest: './dist/src/config/global', cache: args.cache })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/build-app",
-  "version": "1.4.2",
+  "version": "1.6.0",
   "bin": {
     "build-app": "./bin/index.js",
     "sv-app-build": "./bin/index.js"
@@ -14,43 +14,41 @@
   },
   "homepage": "https://docs.soleil.se/build/app",
   "dependencies": {
-    "@babel/core": "7.18.13",
-    "@babel/preset-env": "7.18.10",
-    "@rollup/plugin-alias": "3.1.9",
-    "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-commonjs": "22.0.2",
-    "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "13.3.0",
-    "@rollup/plugin-replace": "4.0.0",
-    "@soleil-se/build-config": "1.1.3",
-    "@soleil-se/build-utils": "1.4.3",
+    "@babel/core": "7.20.12",
+    "@babel/preset-env": "7.20.2",
+    "@rollup/plugin-alias": "4.0.3",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-commonjs": "24.0.1",
+    "@rollup/plugin-json": "6.0.0",
+    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-replace": "5.0.2",
+    "@rollup/plugin-terser": "0.4.0",
     "archiver": "5.3.1",
-    "autoprefixer": "10.4.8",
+    "autoprefixer": "10.4.13",
     "babel-plugin-transform-async-to-promises": "0.8.18",
-    "chalk": "5.0.1",
+    "chalk": "5.2.0",
     "find-up": "6.3.0",
     "form-data": "4.0.0",
-    "fs-extra": "10.1.0",
-    "glob": "^8.0.3",
-    "got": "12.3.1",
+    "fs-extra": "11.1.0",
+    "glob": "^8.1.0",
+    "got": "12.5.3",
     "gzip-size": "7.0.0",
     "lodash-es": "4.17.21",
-    "postcss": "8.4.16",
-    "postcss-discard-duplicates": "5.1.0",
+    "postcss": "8.4.21",
     "postcss-pxtorem": "6.0.0",
-    "pretty-bytes": "6.0.0",
-    "rollup": "2.78.1",
+    "pretty-bytes": "6.1.0",
+    "rollup": "3.15.0",
     "rollup-plugin-cleanup": "3.2.1",
-    "rollup-plugin-insert": "1.3.2",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-string": "3.0.0",
-    "rollup-plugin-svelte": "7.1.0",
-    "rollup-plugin-terser": "7.0.2",
-    "slash": "4.0.0",
-    "svelte-preprocess": "4.10.7"
+    "rollup-plugin-svelte": "7.1.2",
+    "slash": "5.0.0",
+    "svelte-preprocess": "5.0.1",
+    "@soleil-se/build-config": "1.1.3",
+    "@soleil-se/build-utils": "1.4.3"
   },
   "devDependencies": {
-    "svelte": "3.49.0"
+    "svelte": "3.55.1"
   },
   "scripts": {},
   "description": "Script for building WebApps, RESTApps and Widgets with Svelte in Sitevision.",

package/rollup/api/getPostcssPlugin.js

@@ -2,22 +2,21 @@ import postcss from 'rollup-plugin-postcss';
 
 import autoprefixer from 'autoprefixer';
 import pxtorem from 'postcss-pxtorem';
-import discardDuplicates from 'postcss-discard-duplicates';
 
 import config from '@soleil-se/build-config';
 import preprocessOptions from './common/preprocessOptions.js';
 
-const plugins = [autoprefixer(config?.css?.plugins?.autoprefixer), discardDuplicates()];
+const plugins = [autoprefixer(config?.css?.plugins?.autoprefixer)];
 
 if (config?.css?.plugins?.pxtorem) {
   plugins.push(pxtorem(config?.css.plugins.pxtorem));
 }
 
-export default function getPostcssPlugin({ cssOutput, debug }) {
+export default function getPostcssPlugin({ extractCss, debug }) {
   return postcss({
     plugins,
-    extract: !!cssOutput && !debug,
-    minimize: !debug ? { level: 2 } : false,
+    extract: extractCss,
+    minimize: { preset: 'default' },
     sourceMap: debug ? 'inline' : false,
     use: preprocessOptions,
   });

package/rollup/api/getStringPlugin.js

@@ -0,0 +1,5 @@
+import { string } from 'rollup-plugin-string';
+
+export default function getStringPlugin() {
+  return string({ include: '**/*.{html,svg}' });
+}

package/rollup/api/getTerserPlugin.js

@@ -1,4 +1,4 @@
-import { terser } from 'rollup-plugin-terser';
+import terser from '@rollup/plugin-terser';
 
 export default function getTerserPlugin({ debug }) {
   return debug ? false : terser({

package/rollup/client.js

@@ -3,7 +3,6 @@ import json from '@rollup/plugin-json';
 
 import fse from 'fs-extra';
 
-import moveCss from './utils/moveCss.js';
 import onwarn from './utils/onwarn.js';
 import getSitevisionClientPackages from './utils/getSitevisionClientPackages.js';
 
@@ -15,7 +14,7 @@ import getNodeResolvePlugin from './api/getNodeResolvePlugin.js';
 import getSveltePlugin from './api/getSveltePlugin.js';
 import getPostcssPlugin from './api/getPostcssPlugin.js';
 import getTerserPlugin from './api/getTerserPlugin.js';
-import getInsertPlugin from './api/getInsertPlugin.js';
+import getStringPlugin from './api/getStringPlugin.js';
 
 import sitevision from './plugins/sitevisionClient.js';
 import bundleSize from './plugins/bundleSize.js';
@@ -25,7 +24,7 @@ export default function rollupClient({
   globals = {},
   input,
   output,
-  cssOutput,
+  extractCss = false,
   showSize = true,
   bundled,
   hydratable,
@@ -48,11 +47,11 @@ export default function rollupClient({
       getAliasClientPlugin(),
       getNodeResolvePlugin(),
       getCommonjsPlugin(),
-      getInsertPlugin({ input, imports: [cssOutput] }),
-      await getSveltePlugin({ input, debug, emitCss: !!cssOutput, hydratable }),
-      getPostcssPlugin({ cssOutput, debug }),
+      await getSveltePlugin({ input, debug, emitCss: extractCss, hydratable }),
+      getPostcssPlugin({ extractCss, debug }),
       getBabelClientPlugin(),
       json(),
+      getStringPlugin(),
       showSize && bundleSize(),
       getTerserPlugin({ debug }),
     ];
@@ -67,15 +66,13 @@ export default function rollupClient({
       });
 
       bundleCache = cache && bundle.cache;
-      await bundle.write({
+      return bundle.write({
         file: output,
         globals,
         format: bundled ? 'amd' : 'iife',
         sourcemap: debug ? 'inline' : false,
         interop: 'auto',
       });
-
-      return moveCss(cssOutput, output);
     } catch (e) {
       bundleCache = undefined;
       throw e;

package/rollup/server.js

@@ -1,22 +1,20 @@
 import { rollup } from 'rollup';
 import json from '@rollup/plugin-json';
-import { string } from 'rollup-plugin-string';
 import cleanup from 'rollup-plugin-cleanup';
 
 import fse from 'fs-extra';
 
-import moveCss from './utils/moveCss.js';
 import onwarn from './utils/onwarn.js';
 
 import { getReplaceServerPlugin } from './api/getReplacePlugin.js';
 import { getAliasServerPlugin } from './api/getAliasPlugin.js';
 import { getBabelServerPlugin } from './api/getBabelPlugin.js';
 import getCommonjsPlugin from './api/getCommonjsPlugin.js';
-import getInsertPlugin from './api/getInsertPlugin.js';
 import getNodeResolvePlugin from './api/getNodeResolvePlugin.js';
 import getSveltePlugin from './api/getSveltePlugin.js';
 import getPostcssPlugin from './api/getPostcssPlugin.js';
 import getTerserPlugin from './api/getTerserPlugin.js';
+import getStringPlugin from './api/getStringPlugin.js';
 
 import sitevision from './plugins/sitevisionServer.js';
 
@@ -24,7 +22,7 @@ export default function rollupServer({
   debug,
   input,
   output,
-  cssOutput,
+  extractCss = false,
   bundled,
   cache = true,
 } = {}) {
@@ -41,12 +39,11 @@ export default function rollupServer({
       getAliasServerPlugin(),
       sitevision(),
       json(),
-      string({ include: '**/*.html' }),
+      getStringPlugin(),
       getNodeResolvePlugin(),
       getCommonjsPlugin(),
-      getInsertPlugin({ input, imports: [cssOutput] }),
-      await getSveltePlugin({ input, emitCss: !!cssOutput, ssr: true }),
-      getPostcssPlugin({ cssOutput, debug }),
+      await getSveltePlugin({ input, emitCss: extractCss, ssr: true }),
+      getPostcssPlugin({ extractCss, debug }),
       getBabelServerPlugin(),
       bundled ? getTerserPlugin({ debug }) : cleanup({ maxEmptyLines: 1 }),
     ];
@@ -60,13 +57,11 @@ export default function rollupServer({
       });
 
       bundleCache = cache && bundle.cache;
-      await bundle.write({
+      return bundle.write({
         file: output,
         intro: 'var Promise = Promise || { resolve: () => {} };',
         format: 'iife',
       });
-
-      return moveCss(cssOutput, output);
     } catch (e) {
       bundleCache = undefined;
       throw e;

package/rollup/utils/onwarn.js

@@ -1,15 +1,21 @@
 import { logWarning } from '@soleil-se/build-utils/log';
 
 export default function onwarn(warning) {
+  let { message } = warning;
   if (warning.code === 'CIRCULAR_DEPENDENCY') return;
 
   if (warning.code === 'PLUGIN_WARNING') {
     if (warning.pluginCode && warning.pluginCode === 'a11y-no-onchange') return;
   }
 
+  if (warning.code === 'MISSING_NODE_BUILTINS') {
+    if (warning.ids.length === 1 && warning.ids[0] === 'events') return;
+    message = warning.message.replace(/"events", | and "events"|"events" and |"events"/g, '');
+  }
+
   if (warning.code === 'UNRESOLVED_IMPORT') {
-    const message = warning.message.replace(' – treating it as an external dependency', '. Have you installed it?');
+    message = message.replace(' - treating it as an external dependency', '. Have you installed it?');
     throw new Error(message);
   }
-  logWarning(warning.message);
+  logWarning(message);
 }

package/utils/files.js

@@ -20,9 +20,38 @@ async function createIndex(dest) {
   }
 }
 
+async function hasSameContent(path1, path2) {
+  if (!fse.existsSync(path1) || !fse.existsSync(path2)) return false;
+  const [content1, content2] = await Promise.all([fse.readFile(path1), fse.readFile(path2)]);
+  return Buffer.compare(content1, content2) === 0;
+}
+
+async function moveFileIfExists(src, dest) {
+  if (!fse.existsSync(src)) return Promise.resolve();
+  return fse.move(src, dest, { overwrite: true });
+}
+
+async function manageCss({ type, dest }) {
+  const serverOutput = `${dest}/src/index.css`;
+  const clientOutput = `${dest}/src/main.css`;
+  const hooksOutput = `${dest}/src/hooks.css`;
+
+  const cssDest = type.toLowerCase() === 'webapp' ? `${dest}/src/css` : `${dest}/src/resource/client`;
+
+  if (await hasSameContent(serverOutput, clientOutput)) {
+    await fse.remove(serverOutput);
+  }
+
+  return Promise.all([
+    moveFileIfExists(serverOutput, `${cssDest}/index.css`),
+    moveFileIfExists(clientOutput, `${cssDest}/main.css`),
+    moveFileIfExists(hooksOutput, `${cssDest}/hooks.css`),
+  ]);
+}
+
 export default function files({ type, dest }) {
-  if (type.toLowerCase() === 'restapp') return undefined;
+  if (type.toLowerCase() === 'restapp') return manageCss({ type, dest });
   return () => Promise.all(
-    [createMain(dest), createIndex(dest)],
+    [createMain(dest), createIndex(dest), manageCss({ type, dest })],
   );
 }

package/rollup/api/getInsertPlugin.js

@@ -1,14 +0,0 @@
-import { transform } from 'rollup-plugin-insert';
-import { existsSync } from 'fs';
-import slash from 'slash';
-import { relative, dirname } from 'path';
-
-export default function getInsertPlugin({ input, imports }) {
-  return transform((ms, code) => {
-    const existingImports = imports
-      .filter((importee) => importee && existsSync(importee))
-      .map((importee) => slash(relative(dirname(input), importee)))
-      .map((importee) => `import './${importee}';`);
-    return `${existingImports.join('\n')}\n${code}`;
-  }, { include: input });
-}

package/rollup/utils/moveCss.js

@@ -1,10 +0,0 @@
-import fse from 'fs-extra';
-
-export default function moveCss(css, output) {
-  if (css && fse.existsSync(output.replace('.js', '.css'))) {
-    return fse.move(output.replace('.js', '.css'), css, {
-      overwrite: true,
-    });
-  }
-  return Promise.resolve();
-}