sku 14.1.0 → 14.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # sku
 
+## 14.1.1
+
+### Patch Changes
+
+- vite build (experimental): Allowing specific cjs package interop and support publicPath values ([#1203](https://github.com/seek-oss/sku/pull/1203))
+
 ## 14.1.0
 
 ### Minor Changes

package/dist/config/jest/jsBabelTransform.js

@@ -1,9 +1,9 @@
-import babelJest from 'babel-jest';
+import { createTransformer } from 'babel-jest';
 import babelConfig from '../babel/babelConfig.js';
 import targets from '../targets.json' with { type: 'json' };
 import { getSkuContext } from "../../context/createSkuContext.js";
 const { rootResolution } = getSkuContext();
-export default babelJest.createTransformer(babelConfig({
+export default createTransformer(babelConfig({
     target: 'jest',
     rootResolution,
     browserslist: targets.browserslistNodeTarget,

package/dist/config/jest/tsBabelTransform.js

@@ -1,9 +1,9 @@
-import babelJest from 'babel-jest';
+import { createTransformer } from 'babel-jest';
 import babelConfig from '../babel/babelConfig.js';
 import targets from '../targets.json' with { type: 'json' };
 import { getSkuContext } from "../../context/createSkuContext.js";
 const { rootResolution } = getSkuContext();
-export default babelJest.createTransformer(babelConfig({
+export default createTransformer(babelConfig({
     target: 'jest',
     lang: 'ts',
     rootResolution,

package/dist/services/vite/helpers/createConfig.d.ts

@@ -23,6 +23,7 @@ export declare const createViteConfig: ({ skuContext, configType, plugins, }: {
         ssr: boolean;
         manifest: boolean;
         ssrManifest: false;
+        assetsDir: string;
         rollupOptions: {
             input: string;
             output: {

package/dist/services/vite/helpers/createConfig.js

@@ -1,5 +1,6 @@
 import { createRequire, builtinModules } from 'node:module';
 import react from '@vitejs/plugin-react-swc';
+import { cjsInterop } from 'vite-plugin-cjs-interop';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import skuVitePreloadPlugin from '../plugins/skuVitePreloadPlugin.js';
 import { fixViteVanillaExtractDepScanPlugin } from "../plugins/esbuild/fixViteVanillaExtractDepScanPlugin.js";
@@ -19,6 +20,9 @@ export const createViteConfig = ({ skuContext, configType = 'client', plugins =
     return {
         root: process.cwd(),
         plugins: [
+            cjsInterop({
+                dependencies: ['@apollo/client', 'lodash'],
+            }),
             react(),
             vanillaExtractPlugin(),
             skuVitePreloadPlugin(),
@@ -40,6 +44,9 @@ export const createViteConfig = ({ skuContext, configType = 'client', plugins =
             ssr: configType === 'ssr' || configType === 'ssg',
             manifest: configType === 'client',
             ssrManifest: false,
+            // TODO Fix URL paths as a publicPath value. Absolute and relative paths work, but Vite removes the first `/` in URLs (http://foo.com -> http:/foo.com).
+            // TODO URL paths also output to url folders. e.g., /http:/foo.com/assets/[filename].js.
+            assetsDir: skuContext.publicPath.replace(/(^\/|\/$)/g, ''),
             rollupOptions: {
                 input: input[configType],
                 output: {

package/dist/services/vite/helpers/prerenderRoutes.js

@@ -12,6 +12,7 @@ export const prerenderRoutes = async (skuContext) => {
         const render = (await import(resolve('./dist/render/render.js'))).default;
         const loadableCollector = createCollector({
             manifest,
+            base: skuContext.publicPath.startsWith('/') ? '/' : '',
         });
         const html = await createPreRenderedHtml({
             url: route.route,

package/dist/services/vite/loadable/collector.d.ts

@@ -7,10 +7,11 @@ export declare class Collector {
     nonce?: string | undefined;
     externalJsFiles?: string[] | undefined;
     entry?: string | undefined;
+    base?: string | undefined;
     moduleIds: Set<string>;
     preloadIds: Map<string, Preload>;
     scriptIds: Map<string, InjectableScript>;
-    constructor(manifest: Manifest, nonce?: string | undefined, externalJsFiles?: string[] | undefined, entry?: string | undefined);
+    constructor(manifest: Manifest, nonce?: string | undefined, externalJsFiles?: string[] | undefined, entry?: string | undefined, base?: string | undefined);
     register(moduleId: ModuleId): void;
     getAllModules(): string[];
     getAllPreloads(): string;
@@ -22,6 +23,7 @@ type CreateCollectorOptions = {
     manifest?: Manifest;
     nonce?: string;
     entry?: string;
+    base?: string;
 };
-export declare const createCollector: ({ externalJsFiles, manifest, nonce, entry, }: CreateCollectorOptions) => Collector;
+export declare const createCollector: ({ externalJsFiles, manifest, nonce, entry, base, }: CreateCollectorOptions) => Collector;
 export {};

package/dist/services/vite/loadable/collector.js

@@ -7,14 +7,16 @@ export class Collector {
     nonce;
     externalJsFiles;
     entry;
+    base;
     moduleIds = new Set();
     preloadIds = new Map();
     scriptIds = new Map();
-    constructor(manifest, nonce, externalJsFiles, entry) {
+    constructor(manifest, nonce, externalJsFiles, entry, base) {
         this.manifest = manifest;
         this.nonce = nonce;
         this.externalJsFiles = externalJsFiles;
         this.entry = entry;
+        this.base = base;
         this.manifest = manifest;
         this.nonce = nonce;
         if (externalJsFiles) {
@@ -32,6 +34,7 @@ export class Collector {
             preloads: this.preloadIds,
             scripts: this.scriptIds,
             nonce,
+            base,
         });
     }
     register(moduleId) {
@@ -42,6 +45,7 @@ export class Collector {
             preloads: this.preloadIds,
             scripts: this.scriptIds,
             nonce: this.nonce,
+            base: this.base,
         });
     }
     getAllModules() {
@@ -69,11 +73,11 @@ export class Collector {
         return linkTags;
     }
 }
-const parseManifestForEntry = ({ manifest, entry, nonce, preloads, scripts, }) => {
+const parseManifestForEntry = ({ manifest, entry, nonce, preloads, scripts, base, }) => {
     if (!manifest) {
         return;
     }
-    const entryChunk = manifest[entry];
+    const entryChunk = manifest[entry] && parseEntryChunk(manifest[entry], { base });
     if (!entryChunk) {
         return;
     }
@@ -102,11 +106,19 @@ const parseManifestForEntry = ({ manifest, entry, nonce, preloads, scripts, }) =
                     nonce,
                     preloads,
                     scripts,
+                    base,
                 });
             }
         }
     }
 };
+const parseEntryChunk = (entryChunk, { base = '/' }) => ({
+    ...entryChunk,
+    // Overriding the path urls to include the base path.
+    css: entryChunk.css?.map((path) => `${base}${path}`),
+    assets: entryChunk.assets?.map((path) => `${base}${path}`),
+    file: `${base}${entryChunk.file}`,
+});
 const addFileToPreloads = ({ preloads, entryChunk, entry, nonce, }) => {
     preloads.set(entry, {
         rel: 'modulepreload',
@@ -152,7 +164,7 @@ const addAssetToPreloads = ({ preloads, chunk, nonce, }) => {
         type: mimeType,
     });
 };
-export const createCollector = ({ externalJsFiles, manifest, nonce, entry, }) => {
+export const createCollector = ({ externalJsFiles, manifest, nonce, entry, base, }) => {
     let entryPoint = entry || 'index.html';
     const internalManifest = manifest || {};
     if (!internalManifest[entryPoint]) {
@@ -161,5 +173,5 @@ export const createCollector = ({ externalJsFiles, manifest, nonce, entry, }) =>
             entryPoint = entryChunk[0];
         }
     }
-    return new Collector(internalManifest, nonce, externalJsFiles, entryPoint);
+    return new Collector(internalManifest, nonce, externalJsFiles, entryPoint, base);
 };

package/dist/services/vite/loadable/helpers/preloadUtils.js

@@ -1,11 +1,11 @@
 const getNonce = (nonce) => (nonce ? ` nonce="${nonce}"` : '');
 const tagTypes = {
-    stylesheet: ({ href, nonce }) => `<link rel="stylesheet" href="/${href}" crossorigin${getNonce(nonce)} />`,
-    modulepreload: ({ href, nonce }) => `<link rel="modulepreload" href="/${href}" crossorigin${getNonce(nonce)} />`,
-    module: ({ href, asyncScript, nonce }) => `<script type="module"${asyncScript ? ' async' : ''} src="/${href}" crossorigin${getNonce(nonce)}></script>`,
+    stylesheet: ({ href, nonce }) => `<link rel="stylesheet" href="${href}" crossorigin${getNonce(nonce)} />`,
+    modulepreload: ({ href, nonce }) => `<link rel="modulepreload" href="${href}" crossorigin${getNonce(nonce)} />`,
+    module: ({ href, asyncScript, nonce }) => `<script type="module"${asyncScript ? ' async' : ''} src="${href}" crossorigin${getNonce(nonce)}></script>`,
     preload: ({ as, href, type }) => {
         const crossorigin = as === 'font' || as === 'fetch';
-        return `<link rel="preload" href="/${href}" as="${as}" type="${type}"${crossorigin ? ' crossorigin' : ''} />`;
+        return `<link rel="preload" href="${href}" as="${as}" type="${type}"${crossorigin ? ' crossorigin' : ''} />`;
     },
 };
 // Make this my style still

package/dist/services/vite/loadable/helpers/scriptUtils.d.ts

@@ -3,5 +3,5 @@ export type InjectableScript = {
     isEntry: boolean;
     nonce?: string;
 };
-export declare const createScriptTag: (injectableScript: InjectableScript) => string;
+export declare const createScriptTag: ({ nonce, src }: InjectableScript) => string;
 export declare const sortInjectableScript: (a: InjectableScript) => 1 | -1;

package/dist/services/vite/loadable/helpers/scriptUtils.js

@@ -1,2 +1,2 @@
-export const createScriptTag = (injectableScript) => `<script type="module" src="/${injectableScript.src}" ${injectableScript.nonce ? `nonce="${injectableScript.nonce}"` : ''}></script>`;
+export const createScriptTag = ({ nonce, src }) => `<script type="module" src="${src}" ${nonce ? `nonce="${nonce}"` : ''}></script>`;
 export const sortInjectableScript = (a) => a.isEntry ? 1 : -1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "14.1.0",
+  "version": "14.1.1",
   "description": "Front-end development toolkit, powered by Webpack, Babel, Vanilla Extract and Jest",
   "types": "./dist/index.d.ts",
   "bin": {
@@ -168,6 +168,7 @@
     "terser-webpack-plugin": "^5.1.4",
     "typescript": "~5.6.0",
     "vite": "^6.1.0",
+    "vite-plugin-cjs-interop": "^2.1.6",
     "webpack": "^5.52.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-dev-server": "^5.0.2",