fix loadable and postinstall

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "scripts": {
     "plop": "plop",
+    "install:sku": "pnpm install --filter sku",
     "postinstall": "node ./postinstall.mjs",
     "prepare": "husky",
     "lint": "pnpm run '/^lint:.*/'",

packages/sku/.npmrc

@@ -0,0 +1 @@
+ignore-scripts=true

packages/sku/@loadable/component/index.d.ts

@@ -0,0 +1,3 @@
+import loadable, { loadableReady } from '@loadable/component';
+export default loadable;
+export { loadableReady };

packages/sku/@loadable/component/index.js

@@ -0,0 +1,5 @@
+// This is provided so consumers can import `sku/@loadable/component`,
+// since they don't depend on `@loadable/component` directly.
+import loadable, { loadableReady } from '@loadable/component';
+export default loadable;
+export { loadableReady };

packages/sku/package.json

@@ -4,7 +4,7 @@
   "description": "Front-end development toolkit, powered by Webpack, Babel, Vanilla Extract and Jest",
   "types": "./sku-types.d.ts",
   "bin": {
-    "sku": "/dist/bin/sku.js"
+    "sku": "dist/bin/sku.js"
   },
   "exports": {
     ".": "./sku-types.d.ts",
@@ -17,8 +17,7 @@
       "default": "./dist/config/storybook/index.cjs",
       "types": "./dist/config/storybook/index.d.ts"
     },
-    "./@loadable/component": "./src/@loadable/component/index.ts",
-    "./@storybook/react": "./@storybook/react/index.ts",
+    "./@loadable/component": "./@loadable/component/index.ts",
     "./webpack-plugin": "./dist/config/webpack/plugins/sku-webpack-plugin/index.js",
     "./package.json": "./package.json"
   },

packages/sku/scripts/postinstall.js

@@ -1,31 +1,15 @@
 #!/usr/bin/env node
 // @ts-check
 import { readFile } from 'node:fs/promises';
-import { setCwd, getPathFromCwd, cwd } from '../src/lib/cwd.js';
+import { join } from 'node:path';
 import debug from 'debug';
-import banner from '../src/lib/banner.js';
 import chalk from 'chalk';
-import exists from '../src/lib/exists.js';
 
-const log = debug('sku:postinstall');
+try {
+  const initCwd = process.env.INIT_CWD;
 
-// npm scripts can have an incorrect cwd
-// in this case INIT_CWD should be set
-// see: https://docs.npmjs.com/cli/run-script
-// must be run first
-const initCwd = process.env.INIT_CWD;
-if (initCwd) {
-  setCwd(initCwd);
-}
-
-log('postinstall', `changed cwd to ${cwd()}`);
-
-const packageJson = getPathFromCwd('./package.json');
-const packageJsonExists = await exists(packageJson);
-
-// Don't run configure if CWD is not a project (e.g. npx)
-if (packageJsonExists) {
-  log('postinstall', 'packageJsonExists');
+  const localCwd = initCwd || process.cwd();
+  const packageJson = join(localCwd, './package.json');
   const packageJsonContents = await readFile(packageJson, 'utf-8');
   const {
     name: packageName,
@@ -43,9 +27,26 @@ if (packageJsonExists) {
   // Don't run configure script if sku is not installed
   // Ignore projects that are opting out of sku's postinstall script
   if (packageName === 'sku' || !hasSku || skipPostInstall) {
+    console.log('sku postinstall script skipped');
     process.exit();
   }
 
+  // Suppressing eslint. These imports will work after the build steps for postinstall.
+
+  const { setCwd } = await import('../dist/lib/cwd.js');
+
+  const banner = await import('../dist/lib/banner.js');
+
+  const log = debug('sku:postinstall');
+
+  // npm scripts can have an incorrect cwd
+  // in this case INIT_CWD should be set
+  // see: https://docs.npmjs.com/cli/run-script
+  // must be run first
+  if (initCwd) {
+    setCwd(initCwd);
+  }
+
   if (hasSkuDep) {
     banner('warning', 'sku dependency detected', [
       `${chalk.bold('sku')} is present as a ${chalk.bold('dependency')} in ${chalk.bold(
@@ -80,4 +81,7 @@ if (packageJsonExists) {
     console.error(error);
     throw error;
   }
+} catch {
+  console.log('package.json does not exist');
+  process.exit();
 }

packages/sku/src/context/defaultSkuConfig.js

@@ -4,7 +4,7 @@ import isCompilePackage from '../lib/isCompilePackage.js';
 
 const defaultDecorator = (a) => a;
 
-/** @type {import("../../sku-types.js").SkuConfig} */
+/** @type {import("../../sku-types.d.ts").SkuConfig} */
 export default {
   clientEntry: 'src/client.js',
   renderEntry: 'src/render.js',

packages/sku/src/entry/client/index.js

@@ -2,7 +2,7 @@
 // pointing to the consuming apps client entry
 import client from '__sku_alias__clientEntry';
 
-import { loadableReady } from '../../@loadable/component/index.js';
+import { loadableReady } from '@loadable/component';
 
 import clientContextKey from '../clientContextKey.js';
 

packages/sku/src/lib/language-utils.js

@@ -12,7 +12,7 @@ export function getValidLanguagesForRoute(route) {
   const routeIsForSpecificSite = typeof route.siteIndex === 'number';
 
   /**
-   * @typedef {import("../../sku-types.js").SkuLanguage} SkuLanguage
+   * @typedef {import("../../sku-types.d.ts").SkuLanguage} SkuLanguage
    * @type {(SkuLanguage | null)[]} SkuLanguage
    */
   let languagesToRender = [null];
@@ -49,7 +49,7 @@ function getLanguageParamFromUrl(pathname, route) {
 
 /**
  * @param {import("express").Request} req
- * @param {import("../../sku-types.js").SkuRouteObject} route
+ * @param {import("../../sku-types.d.ts").SkuRouteObject} route
  * @returns {(string | null)}
  */
 export function getLanguageFromRoute(req, route) {

packages/sku/tsconfig.json

@@ -15,5 +15,5 @@
     "declaration": true
   },
   "include": ["./src/**/*"],
-  "exclude": ["./src/@loadable/component/index.ts"]
+  "exclude": ["@loadable/**/*"]
 }

tests/typescript-css-modules.test.ts

@@ -45,7 +45,7 @@ describe('typescript-css-modules', () => {
     });
 
     afterAll(async () => {
-      process.kill();
+      await process.kill();
       // Clean up dist dir to prevent pollution of linted files in lint test
       await rm(distDir, { recursive: true, force: true });
     });
@@ -78,7 +78,7 @@ describe('typescript-css-modules', () => {
     });
 
     afterAll(async () => {
-      server.kill();
+      await server.kill();
       closeAssetServer();
       // Clean up dist-ssr dir to prevent pollution of linted files in lint test
       await rm(distSsrDir, { recursive: true, force: true });
@@ -105,7 +105,7 @@ describe('typescript-css-modules', () => {
     });
 
     afterAll(async () => {
-      server.kill();
+      await server.kill();
     });
 
     it('should start a development server', async () => {