@nizza/devkit 0.1.0-alpha.0

package/dist/src/vite/config-builder/shared/utils/viteCommand.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getViteCmdFlags: function() {
+        return getViteCmdFlags;
+    },
+    getViteCommand: function() {
+        return getViteCommand;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _chalk = /*#__PURE__*/ _interop_require_default._(require("chalk"));
+const _mri = /*#__PURE__*/ _interop_require_default._(require("mri"));
+const _vite = require("vite");
+const _types = require("../types");
+function getViteCommand(mode) {
+    const nxEnv = (0, _vite.loadEnv)(mode, process.cwd(), 'NX');
+    const nxCommandString = process?.env?.['npm_package_scripts_nx'];
+    const modeIsProd = mode === _types.ViteMode.PROD;
+    const stage = (nxEnv?.['NX_TASK_TARGET_CONFIGURATION']) ?? (modeIsProd ? _types.Stage.PROD : _types.Stage.DEV);
+    const target = nxEnv?.['NX_TASK_TARGET_TARGET'] ?? _types.Target.BUILD;
+    const flags = getViteCmdFlags(nxCommandString);
+    const showIn = {
+        prod: (...args)=>modeIsProd && console.log(...args),
+        dev: (...args)=>!modeIsProd && console.log(...args)
+    };
+    try {
+        showIn.prod(_chalk.default.cyan('Build Stage:'), _chalk.default.green(stage));
+        showIn.dev(_chalk.default.green('  ➜ '), _chalk.default.bold.white(`Stage:  `), _chalk.default.cyan(stage));
+    } catch  {
+        showIn.prod(console.log('Build Stage:', stage));
+        showIn.dev(console.log(`  ➜  Stage:  `, stage));
+    }
+    return {
+        stage,
+        target,
+        flags
+    };
+}
+function getViteCmdFlags(commandString) {
+    if (!commandString) return {};
+    const cleanedCommandString = commandString.replace(/"/g, '');
+    const args = (0, _mri.default)(cleanedCommandString.split(' '));
+    delete args['_'];
+    return args;
+}

package/dist/src/vite/index.d.ts

@@ -0,0 +1,3 @@
+export * from './config-builder';
+export * from './plugins';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/vite/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vite/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}

package/dist/src/vite/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./config-builder"), exports);
+_export_star._(require("./plugins"), exports);

package/dist/src/vite/plugins/index.d.ts

@@ -0,0 +1,3 @@
+export * from './third-party-css-inject';
+export * from './shadow-dom-inject-css';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/vite/plugins/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/vite/plugins/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC"}

package/dist/src/vite/plugins/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./third-party-css-inject"), exports);
+_export_star._(require("./shadow-dom-inject-css"), exports);

package/dist/src/vite/plugins/shadow-dom-inject-css/index.d.ts

@@ -0,0 +1,8 @@
+import { type ViteDevServer } from 'vite';
+export declare function injectCssIntoShadowDom(): {
+    name: string;
+    configureServer(_server: ViteDevServer): void;
+    transform(src: string, id: string): void;
+};
+export default injectCssIntoShadowDom;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/vite/plugins/shadow-dom-inject-css/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/vite/plugins/shadow-dom-inject-css/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,MAAM,CAAC;AAE1C,wBAAgB,sBAAsB;;6BAMT,aAAa;mBAGvB,MAAM,MAAM,MAAM;EAiBpC;AAED,eAAe,sBAAsB,CAAC"}

package/dist/src/vite/plugins/shadow-dom-inject-css/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    default: function() {
+        return _default;
+    },
+    injectCssIntoShadowDom: function() {
+        return injectCssIntoShadowDom;
+    }
+});
+function injectCssIntoShadowDom() {
+    const fileRegex = /\.(css)$/;
+    let server;
+    return {
+        name: 'nizza:inject-css-into-shadow-dom',
+        configureServer (_server) {
+            server = _server;
+        },
+        transform (src, id) {
+            if (server) {
+                const relativeId = /\/lib\/.*/.exec(id)?.[0].replace('/lib/', '');
+                if (fileRegex.test(id)) {
+                    server.ws.send({
+                        type: 'custom',
+                        event: 'inject-css-into-shadow-dom:hot-updated',
+                        data: {
+                            id: relativeId,
+                            content: src
+                        }
+                    });
+                }
+            }
+        }
+    };
+}
+const _default = injectCssIntoShadowDom;

package/dist/src/vite/plugins/third-party-css-inject/index.d.ts

@@ -0,0 +1,4 @@
+import { thirdPartyCssInjectPlugin } from './main';
+export * from './main';
+export default thirdPartyCssInjectPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/vite/plugins/third-party-css-inject/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/vite/plugins/third-party-css-inject/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AAEnD,cAAc,QAAQ,CAAC;AACvB,eAAe,yBAAyB,CAAC"}

package/dist/src/vite/plugins/third-party-css-inject/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+const _main = _export_star._(require("./main"), exports);
+const _default = _main.thirdPartyCssInjectPlugin;

package/dist/src/vite/plugins/third-party-css-inject/main.d.ts

@@ -0,0 +1,17 @@
+import type { Plugin } from 'vite';
+export interface Execute {
+    function: (data?: string) => void;
+    listen: string;
+    observer: string;
+}
+export interface ThirdPartyCssInjectPlugin {
+    topExecutionPriority?: boolean;
+    execute?: Execute[];
+}
+/**
+ * Inject the CSS compiled with JS.
+ *
+ * @return {Plugin}
+ */
+export declare function thirdPartyCssInjectPlugin({ topExecutionPriority, execute }?: ThirdPartyCssInjectPlugin | undefined): Plugin;
+//# sourceMappingURL=main.d.ts.map

package/dist/src/vite/plugins/third-party-css-inject/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../../src/vite/plugins/third-party-css-inject/main.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAC;AAGnD,MAAM,WAAW,OAAO;IACtB,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,yBAAyB;IACxC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;CACrB;AACD;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,EAAE,oBAAoB,EAAE,OAAO,EAAE,GAAE,yBAAyB,GAAG,SAG9D,GACA,MAAM,CA8CR"}

package/dist/src/vite/plugins/third-party-css-inject/main.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "thirdPartyCssInjectPlugin", {
+    enumerable: true,
+    get: function() {
+        return thirdPartyCssInjectPlugin;
+    }
+});
+const _utils = require("./utils");
+function thirdPartyCssInjectPlugin({ topExecutionPriority, execute } = {
+    topExecutionPriority: true,
+    execute: []
+}) {
+    //Globally so we can add it to legacy and non-legacy bundle.
+    let config;
+    return {
+        apply: 'build',
+        enforce: 'post',
+        name: 'nizza:third-party-css-inject',
+        configResolved (_config) {
+            config = _config;
+        },
+        async generateBundle (opts, bundle) {
+            if (config.build.ssr) {
+                return;
+            }
+            const htmlFiles = Object.keys(bundle).filter((i)=>i.endsWith('.html'));
+            const cssAssets = Object.keys(bundle).filter((i)=>bundle[i]?.type == 'asset' && bundle[i]?.fileName.endsWith('.css'));
+            const jsAssets = Object.keys(bundle).filter((i)=>bundle[i]?.type == 'chunk' && bundle[i]?.fileName.match(/.[cm]?js$/) != null && !bundle[i]?.fileName.includes('polyfill'));
+            for (const name of htmlFiles){
+                const htmlChunk = bundle[name];
+                let replacedHtml = htmlChunk.source;
+                cssAssets.forEach((cssName)=>{
+                    replacedHtml = (0, _utils.removeLinkStyleSheets)(replacedHtml, cssName);
+                    htmlChunk.source = replacedHtml;
+                });
+            }
+            const jsAsset = bundle[jsAssets[0]];
+            const cssInjectionCode = await (0, _utils.buildCSSInjectionCode)(execute);
+            const appCode = jsAsset.code;
+            jsAsset.code = topExecutionPriority ? '' : appCode;
+            jsAsset.code += cssInjectionCode ? cssInjectionCode.code : '';
+            jsAsset.code += !topExecutionPriority ? '' : appCode;
+        }
+    };
+}

package/dist/src/vite/plugins/third-party-css-inject/utils.d.ts

@@ -0,0 +1,5 @@
+import type { OutputChunk } from 'rollup';
+import type { Execute } from '.';
+export declare function buildCSSInjectionCode(execute?: Execute[]): Promise<OutputChunk | null | any>;
+export declare function removeLinkStyleSheets(html: string, cssFileName: string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/src/vite/plugins/third-party-css-inject/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/vite/plugins/third-party-css-inject/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC;AAuCjC,wBAAsB,qBAAqB,CACzC,OAAO,CAAC,EAAE,OAAO,EAAE,GAClB,OAAO,CAAC,WAAW,GAAG,IAAI,GAAG,GAAG,CAAC,CA0BnC;AAoCD,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,MAAM,GAClB,MAAM,CAKR"}

package/dist/src/vite/plugins/third-party-css-inject/utils.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    buildCSSInjectionCode: function() {
+        return buildCSSInjectionCode;
+    },
+    removeLinkStyleSheets: function() {
+        return removeLinkStyleSheets;
+    }
+});
+const _vite = require("vite");
+const cssInjectedByJsId = '\0vite/all-css';
+const waitForElement = (selector, observerElementName = 'body')=>{
+    const getElement = (selector)=>document.querySelector(selector);
+    return new Promise((resolve)=>{
+        if (getElement(selector)) return resolve(getElement(selector));
+        const observer = new MutationObserver(()=>{
+            if (getElement(selector)) {
+                resolve(getElement(selector));
+                observer.disconnect();
+            }
+        });
+        let observerElement = document.body;
+        switch(observerElementName){
+            case 'body':
+                observerElement = document.body;
+                break;
+            case 'head':
+                observerElement = document.head;
+                break;
+            default:
+                observerElement = document.body;
+                break;
+        }
+        observer.observe(observerElement, {
+            childList: true,
+            subtree: true
+        });
+    });
+};
+async function buildCSSInjectionCode(execute) {
+    const res = await (0, _vite.build)({
+        root: '',
+        configFile: false,
+        logLevel: 'error',
+        plugins: [
+            injectionCSSCodePlugin(execute)
+        ],
+        build: {
+            write: false,
+            target: 'es2015',
+            minify: 'esbuild',
+            assetsDir: '',
+            rollupOptions: {
+                input: {
+                    'all-css': cssInjectedByJsId
+                },
+                output: {
+                    format: 'iife',
+                    manualChunks: undefined
+                }
+            }
+        }
+    });
+    const _cssChunk = Array.isArray(res) ? res[0] : res;
+    if (!('output' in _cssChunk)) return null;
+    return _cssChunk.output[0];
+}
+/**
+ * @param {string} cssToInject
+ * @param {string|null} styleId
+ * @return {Plugin}
+ */ function injectionCSSCodePlugin(execute) {
+    return {
+        name: 'vite:third-party-css-inject',
+        // @ts-ignore
+        resolveId (id) {
+            if (id == cssInjectedByJsId) {
+                return id;
+            }
+        },
+        // @ts-ignore
+        load (id) {
+            if (id == cssInjectedByJsId) {
+                let executeJs = [];
+                if (execute?.length) {
+                    executeJs = execute.map((executeData, index)=>{
+                        return `waitForElement('${executeData.observer}', '${executeData.listen}').then((elm)=>{
+              const extra${index}=${executeData.function};extra${index}(elm)
+            });`;
+                    });
+                }
+                return `try{if(typeof document != 'undefined'){
+        const waitForElement=${waitForElement.toString()};
+        ${executeJs.join(' ')}
+      }}catch(e){console.error('vite-third-party-css-inject-plugin', e);}`;
+            }
+        }
+    };
+}
+function removeLinkStyleSheets(html, cssFileName) {
+    const removeCSS = new RegExp(`<link rel=".*"[^>]*?href=".*/?${cssFileName}"[^>]*?>`);
+    return html.replace(removeCSS, '');
+}

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@nizza/devkit",
+  "version": "0.1.0-alpha.0",
+  "source": "src/index.ts",
+  "main": "dist/src/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {},
+  "executors": "./executors.json"
+}