@lilaquadrat/design-core 0.2.1 → 0.2.2

package/README.md

@@ -54,6 +54,11 @@ optimizeDeps: { exclude: ['@lilaquadrat/studio', '@lilaquadrat/design-core'] }
 
 `createViteConfig` already sets that.
 
+The exception is the tooling Node loads itself at config time (`tooling/vite`):
+Node refuses to strip types for files under `node_modules`, so a published copy
+would never load as `.ts`. Those entries ship as plain `.js` with a `.d.ts`
+beside them for the types.
+
 ## Using it in a design
 
 ### vite

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lilaquadrat/design-core",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "framework layer shared by every lilaquadrat STUDIO design: app bootstrap, router, stores, plugins and build tooling",
   "type": "module",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "./views/*": "./src/views/*",
     "./partials/*": "./src/components/partials/*",
     "./html/*": "./html/*",
-    "./vite": "./tooling/vite.ts",
+    "./vite": "./tooling/vite.js",
     "./eslint": "./tooling/eslint.config.js",
     "./stylelint": "./tooling/stylelint.config.mjs",
     "./cypress": "./tooling/cypress/config.ts",

package/tooling/{preview.plugin.ts → preview.plugin.js}

@@ -1,9 +1,7 @@
-import type { Plugin, UserConfig } from 'vite';
-
 const OUTPUT_DIR = 'dist/preview';
 const PREVIEW_ASSET_DIR = 'previewAssets';
 
-function escapeRegExp (input: string) {
+function escapeRegExp (input) {
 
   return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
@@ -16,13 +14,13 @@ function escapeRegExp (input: string) {
  * while transforming - so even though rolldown tree shakes preview.view.vue out
  * of the app bundle, the images survive as orphans nobody references.
  */
-export function dropPreviewAssets (): Plugin {
+export function dropPreviewAssets () {
 
   return {
     name   : 'drop-preview-assets',
     enforce: 'post',
     apply  : 'build',
-    generateBundle (_options, bundle: Record<string, any>) {
+    generateBundle (_options, bundle) {
 
       Object.keys(bundle).forEach((fileName) => {
 
@@ -30,7 +28,7 @@ export function dropPreviewAssets (): Plugin {
 
         if(single.type !== 'asset') return;
 
-        const origins: string[] = [single.originalFileName, ...single.originalFileNames ?? []].filter(Boolean);
+        const origins = [single.originalFileName, ...single.originalFileNames ?? []].filter(Boolean);
 
         if(origins.some((origin) => origin.includes(PREVIEW_ASSET_DIR))) delete bundle[fileName];
 
@@ -47,7 +45,7 @@ export function dropPreviewAssets (): Plugin {
  * everything here exists because the output is opened straight from disk, where
  * each file is its own opaque origin.
  */
-export function previewBuildOptions (base: UserConfig['build']): UserConfig['build'] {
+export function previewBuildOptions (base) {
 
   return {
     ...base,
@@ -75,13 +73,13 @@ export function previewBuildOptions (base: UserConfig['build']): UserConfig['bui
  * folds the script and the stylesheet into index.html, so the preview is a self
  * contained file that opens over file:// with no server.
  */
-export default function previewBundle (): Plugin {
+export default function previewBundle () {
 
   return {
     name   : 'preview-bundle',
     enforce: 'post',
     apply  : 'build',
-    generateBundle (_options, bundle: Record<string, any>) {
+    generateBundle (_options, bundle) {
 
       const html = bundle['index.html'];
 

package/tooling/vite.d.ts

@@ -0,0 +1,42 @@
+import type { Plugin, UserConfig, UserConfigFnObject } from 'vite';
+
+export type Target = 'local' | 'next' | 'live';
+
+export interface ViteFactoryOptions {
+  /**
+   * the project config keyed by target, as exported from its own config.ts.
+   * it is only serialised into __FRONTEND_CONFIG__, so its shape is the
+   * project's business
+   */
+  config: Record<Target, unknown>
+  /**
+   * absolute path to the project root (the folder holding index.html)
+   */
+  root: string
+  /**
+   * project relative path to the less folder holding variables, mixins and
+   * fonts - these are the design and never ship with the package
+   */
+  lessDir?: string
+  /**
+   * project relative entry for the ssr build
+   */
+  ssrEntry?: string
+  /**
+   * project relative entry for the ssr preflight fixtures (mode ssr-test).
+   * it exports the design's viewData and module registries so the test suite
+   * can read them without a bundler of its own
+   */
+  ssrFixturesEntry?: string
+  /**
+   * additional defines merged over the framework ones
+   */
+  define?: Record<string, string>
+}
+
+export function createViteConfig (options: ViteFactoryOptions): UserConfigFnObject;
+export default createViteConfig;
+
+export function previewBundle (): Plugin;
+export function dropPreviewAssets (): Plugin;
+export function previewBuildOptions (base: UserConfig['build']): UserConfig['build'];

package/tooling/{vite.ts → vite.js}

@@ -2,48 +2,14 @@ import { fileURLToPath, URL } from 'node:url';
 import { existsSync } from 'node:fs';
 import { resolve } from 'node:path';
 
-import { defineConfig, type UserConfig } from 'vite';
+import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
 import { visualizer } from 'rollup-plugin-visualizer';
 
-import previewBundle, { dropPreviewAssets, previewBuildOptions } from './preview.plugin.ts';
+import previewBundle, { dropPreviewAssets, previewBuildOptions } from './preview.plugin.js';
 
-export type Target = 'local' | 'next' | 'live';
-
-export interface ViteFactoryOptions {
-  /**
-   * the project config keyed by target, as exported from its own config.ts.
-   * it is only serialised into __FRONTEND_CONFIG__, so its shape is the
-   * project's business
-   */
-  config: Record<Target, unknown>
-  /**
-   * absolute path to the project root (the folder holding index.html)
-   */
-  root: string
-  /**
-   * project relative path to the less folder holding variables, mixins and
-   * fonts - these are the design and never ship with the package
-   */
-  lessDir?: string
-  /**
-   * project relative entry for the ssr build
-   */
-  ssrEntry?: string
-  /**
-   * project relative entry for the ssr preflight fixtures (mode ssr-test).
-   * it exports the design's viewData and module registries so the test suite
-   * can read them without a bundler of its own
-   */
-  ssrFixturesEntry?: string
-  /**
-   * additional defines merged over the framework ones
-   */
-  define?: Record<string, string>
-}
-
-function resolveTarget (mode: string): Target {
+function resolveTarget (mode) {
 
   if(mode === 'production') return 'live';
   if(mode === 'next') return 'next';
@@ -57,7 +23,7 @@ function resolveTarget (mode: string): Target {
  * override either by keeping a file of the same name in its root, otherwise the
  * package template is used.
  */
-function resolveTemplate (root: string, name: string) {
+function resolveTemplate (root, name) {
 
   const projectTemplate = resolve(root, name);
 
@@ -67,7 +33,7 @@ function resolveTemplate (root: string, name: string) {
 
 }
 
-export function createViteConfig (options: ViteFactoryOptions) {
+export function createViteConfig (options) {
 
   /**
    * absolute on purpose: the globalVars below are prepended to every less file,
@@ -78,7 +44,7 @@ export function createViteConfig (options: ViteFactoryOptions) {
   const ssrEntry = options.ssrEntry ?? '/src/server-entry.ts';
   const ssrFixturesEntry = options.ssrFixturesEntry ?? '/src/ssr-test.fixtures.ts';
 
-  return defineConfig((settings): UserConfig => {
+  return defineConfig((settings) => {
 
     const target = resolveTarget(settings.mode);
     const isProduction = target === 'live';
@@ -99,7 +65,7 @@ export function createViteConfig (options: ViteFactoryOptions) {
      */
     const isOptimized = isProduction || isPreview;
     const config = options.config[target];
-    const viteConfig: UserConfig = {
+    const viteConfig = {
       plugins: [
         vue(),
         visualizer(),
@@ -137,7 +103,7 @@ export function createViteConfig (options: ViteFactoryOptions) {
                 { name: 'vendor', test: /[\\/]node_modules[\\/]/ },
               ],
             },
-            assetFileNames: (assetInfo: { name?: string }) => {
+            assetFileNames: (assetInfo) => {
               if (assetInfo.name?.endsWith('woff') || assetInfo.name?.endsWith('png')) {
                 return '[name][extname]';
               }