@lls/vitescripts 1.0.0-128c53cdd

package/README.md

@@ -0,0 +1,13 @@
+# viteScripts
+
+lls vite plugins
+
+Purpose is to factorize vite plugin scripts
+
+## deploy
+
+```
+npm version patch
+git push && git push origin $(git describe --tags --abbrev=0)
+npm publish
+```

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@lls/vitescripts",
+  "version": "1.0.0-128c53cdd",
+  "description": "lls vite plugins",
+  "main": "src/index.mjs",
+  "files": [
+    "src/"
+  ],
+  "dependencies": {
+    "lightningcss": "1.22.1",
+    "esbuild-plugin-lightningcss-modules": "0.1.1",
+    "browserslist": "4.22.1"
+  },
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@lls/eslint-config-lls": "1.1.12",
+    "@lls/lls-kit": "23.0.0",
+    "nano-staged": "0.8.0",
+    "vitest": "0.34.6"
+  },
+  "nano-staged": {
+    "*.{js,jsx,mjs,tsx,ts}": "CONF_ENV=test pnpm vitest related --run"
+  },
+  "scripts": {
+    "test": "CONF_ENV=test pnpm vitest run",
+    "precommit": "pnpm nano-staged"
+  }
+}

package/src/esbuildCssModulePlugin.mjs

@@ -0,0 +1,43 @@
+import fs from 'fs'
+import path from 'path'
+import llsCssModuleMacroPlugin from './llsCssModuleMacroPlugin.mjs'
+import { cssModules } from 'esbuild-plugin-lightningcss-modules'
+
+export default ({ prefix = '', llsCssModuleMacroPluginArg }) => {
+  const esbuildCssModule = cssModules({
+    targets: { chrome: 80 << 16 },
+    drafts: { nesting: true },
+    cssModulesPattern: `${prefix ? prefix + '-' : ''}[hash]-[local]`
+  })
+  const tmpDir = path.join(process.cwd(), 'tmp_esbuild')
+  return [
+    {
+      name: 'lls-cssmodule',
+      async setup (build) {
+        await fs.promises.mkdir(tmpDir, { recursive: true })
+        const llsCssModuleMacroPluginInstance = await llsCssModuleMacroPlugin(llsCssModuleMacroPluginArg)
+
+        // need to add the generated files to esbuild pipeline
+        build.onResolve({ filter: /tmp_esbuild/ }, async args => {
+          return { path: args.path }
+        })
+        build.onLoad({ filter: /module\.css$/ }, async args => {
+          if (args.path.startsWith(tmpDir)) return
+
+          const contents = await fs.promises.readFile(args.path, 'utf8').then(str => llsCssModuleMacroPluginInstance.transform(str, args.path))
+          const id = args.path.replace(process.cwd(), '').replace(/\//g, '_')
+          const out = path.join(tmpDir, id)
+          await fs.promises.writeFile(out, contents)
+          return {
+            contents: `export { default } from '${out}'`,
+            loader: 'js'
+          }
+        })
+        build.onEnd(async () => {
+          await fs.promises.rm(tmpDir, { recursive: true })
+        })
+      }
+    },
+    esbuildCssModule
+  ]
+}

package/src/index.mjs

@@ -0,0 +1,11 @@
+export { default as llsAssetsPlugin } from './llsAssetsPlugin.mjs'
+export { default as llsLinariaImportsPlugin } from './llsLinariaImportsPlugin.mjs'
+export { default as llsCssSsrCollectPlugin } from './llsCssSsrCollectPlugin.mjs'
+export { default as llsRequirePlugin } from './llsRequirePlugin.mjs'
+export { default as llsSideRefreshMetaPlugin } from './llsSideRefreshMetaPlugin.mjs'
+export { default as llsVitestMockPlugin } from './llsVitestMockPlugin.mjs'
+export { default as llsLadlePlugin } from './llsLadlePlugin.mjs'
+export { default as llsCssModuleMacroPlugin } from './llsCssModuleMacroPlugin.mjs'
+export { default as postBuildAutoprefixerPlugin } from './postBuildAutoprefixerPlugin.mjs'
+export { default as esbuildCssModulePlugin } from './esbuildCssModulePlugin.mjs'
+export { default as postBuildTsTypesPlugin } from './postBuildTsTypes.mjs'

package/src/llsAssetsPlugin.mjs

@@ -0,0 +1,74 @@
+import fs from 'fs'
+import { promisify } from 'util'
+import { exec } from 'node:child_process'
+import path from 'path'
+const execP = promisify(exec)
+
+// https://github.com/vitejs/vite/pull/8574
+/**
+ * Plugin that will copy assets from given repos to public dir of launched project
+ * @param {*} llsRepos array containing names of the repos
+ * @param {*} publicDir public dir to copy assets to
+ * @returns config() method that copies assets
+ * transform() method that replaces assets path to be resolved
+ */
+const llsAssetsPlugin = (llsRepos, publicDir = 'ladleassets', { stripRoot = true } = {}) => {
+  const publicAssetDir = path.join(publicDir, 'assets')
+  const fileExists = (s) => new Promise(resolve => fs.access(s, e => resolve(!e)))
+  const srcRoot = process.cwd() + '/src'
+  const storyRoot = process.cwd() + '/stories'
+  return {
+    name: 'lls:copyassets',
+    async config () {
+      await execP(`mkdir -p ${publicAssetDir}`)
+      const pnpmNameToPath = await execP('pnpm ls -r @lls/lls-drawer --json'/*'pnpm ls -r -d 0 --json'*/)
+        .then(({ stdout }) => JSON.parse(stdout))
+        .then(json => {
+          let drawer = null
+          const back = json.map(({ name, path, dependencies }) => {
+            if (dependencies?.['@lls/lls-drawer']?.path) {
+              drawer = ['@lls/lls-drawer', dependencies?.['@lls/lls-drawer']?.path + '/lib/assets/*']
+            }
+            return [name, path + '/lib/assets/*']
+          })
+          return back.concat(drawer ? [drawer] : [])
+        })
+        .then(Object.fromEntries)
+        .catch(e => {})
+      const repoArgs = await Promise.all(llsRepos.map(async repo => {
+        if (!repo.startsWith('@')) return repo
+        const pnpmPath = pnpmNameToPath[repo]
+        if (pnpmPath) return pnpmPath
+
+        const aPath = 'lib/assets/*'
+        const prefix = await fileExists(`${process.cwd()}/node_modules/${repo}`)
+          ? `${process.cwd()}/node_modules/${repo}`
+          : `${process.cwd()}/node_modules/.pnpm/${repo}`
+        return path.join(prefix, aPath)
+      }))
+      repoArgs.push('static/assets/*')
+      for (const repo of repoArgs) {
+        await execP(`cp -rf ${repo} ${publicAssetDir}`)
+      }
+    },
+    ...(stripRoot && {
+      transform (src, id) {
+        if (
+          llsRepos.some(repo => id.includes(repo)) ||
+        id.startsWith(srcRoot) ||
+        id.startsWith(storyRoot)
+        ) {
+        // workaround because we don't use /assets (maybe we should ?)
+        // specs orders than relative path in css is current container
+        // so use relative path instead of / being the "fqdn"
+          return {
+            code: src.replace(/(= |url\(|Worker\()(['"])\/assets/g, '$1$2assets'),
+            map: null
+          }
+        }
+      }
+    })
+  }
+}
+
+export default llsAssetsPlugin

package/src/llsCssModuleMacroPlugin.mjs

@@ -0,0 +1,140 @@
+import { transform as lightTransform } from 'lightningcss'
+import { makeSideRefreshThemeInterceptor } from './llsSideRefreshMetaPlugin.mjs'
+
+const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, themeIsNotDarkMode, sideRefreshActiveModules = [] }) => {
+  const keepProperties = [
+    'Supporting',
+    'Button1',
+    'Button2',
+    'Body1',
+    'Body2',
+    'Body3',
+    'RippleEffect',
+    'Heading1',
+    'Heading2',
+    'Heading3',
+    'Heading4',
+    'ThemeCss',
+    'FontFamily'
+  ]
+  const kitBag = await import('@lls/lls-kit')
+    .then(m => m.default || m)
+    .then(obj => Object.fromEntries(keepProperties.map(property => [property, obj[property]])))
+
+  const cssMacroTheme = {
+    themeIsFreeMode,
+    themeIsDarkMode,
+    themeIsNotDarkMode,
+    dark: themeIsDarkMode,
+    free: themeIsFreeMode,
+    light: themeIsNotDarkMode
+  }
+  const replaceKitBag = (__, cap) => kitBag[cap]
+
+  const interceptSideRefreshTheme = await makeSideRefreshThemeInterceptor(sideRefreshActiveModules)
+  // replaces dark from @llsTheme(dark) with proper css macro
+  const replaceTheme = (cap, id) => {
+    // try to resolve proper macro from siderefreshed directory
+    // otherwise defaults to standard resolving
+    return interceptSideRefreshTheme(cap, id, (cap) => {
+      const back = cssMacroTheme[cap]
+      if (!back) {
+        throw new Error('llsCssModuleMacroPlugin::missing definition for ' + cap)
+      }
+      return back
+    })
+  }
+  const replaceGetFluidSize = (__, cap) => {
+    const args = {
+      minViewport: 320, // BREAKPOINT_XXS
+      maxViewport: 1280, // BREAKPOINT_MD
+      minSize: undefined,
+      maxSize: undefined
+    }
+    for (const a of cap.matchAll(/(?<prop>maxSize|minSize|minViewport|maxViewport)\s*:\s*(?<value>.+?)(?=[,]|\s|$)/g)) {
+      args[a.groups.prop] = a.groups.value
+    }
+    const { maxSize, minSize, minViewport, maxViewport } = args
+    return `min(${maxSize}px, max(${minSize}px, calc(${minSize}px + (${maxSize} - ${minSize}) * ((100vw - ${minViewport}px) / (${maxViewport} - ${minViewport})))))`
+  }
+
+  // lightningcss helpers
+  const token = (type) => ({ type: 'token', value: { type } })
+  const delim = (operator) => ({ type: 'token', value: { type: 'delim', value: operator } })
+  const length = (value, unit) => ({ type: 'length', value: { value, unit } })
+  const func = (name, args) => ({ type: 'function', value: { name, arguments: args } })
+  const num = value => ({ type: 'token', value: { type: 'number', value } })
+  return {
+    enforce: 'pre',
+    transform (src, id) {
+      if (!/module\.css(\?.*)?$/.test(id)) {
+        return undefined
+      }
+      const back = src
+        .replace(/@cx\((Body[123]|Heading[1234]|Button[12]|Supporting|RippleEffect|FontFamily)\)/g, replaceKitBag)
+        .replace(/\${(Body[123]|Heading[1234]|Button[12]|Supporting|RippleEffect|FontFamily)}/g, replaceKitBag)
+        .replace(/\${(themeIsFreeMode|themeIsDarkMode|themeIsNotDarkMode)}/g, (__, cap) => replaceTheme(cap, id))
+        .replace(/@llsTheme\((dark|light|free)\)/g, (__, cap) => replaceTheme(cap, id))
+
+        .replace(/\${getFluidSize\({(.*?)}\)}/gs, replaceGetFluidSize)
+        .replace(/\${getTruePx\((.*?)\)}?/g, 'calc(var(--size-index, 1) * $1 * 1px)')
+
+      const { code } = lightTransform({
+        code: Buffer.from(back),
+        visitor: {
+          Function: {
+            getTruePx ({ arguments: [value] }) {
+              return {
+                type: 'function',
+                value: {
+                  name: 'calc',
+                  arguments: [
+                    value.type !== 'token' && token('parenthesis-block'),
+                    value,
+                    value.type !== 'token' && token('close-parenthesis'),
+                    delim('*'),
+                    { type: 'var', value: { name: { ident: '--size-index', from: null }, fallback: [{ type: 'token', value: { type: 'number', value: 1 } }] } },
+                    delim('*'),
+                    length(1, 'px')
+                  ].filter(Boolean)
+                }
+              }
+            },
+            getFluidSize ({ arguments: [minSize, comma1, maxSize, comma2, iMinViewport, comma3, iMaxViewport] }) {
+              const minViewport = (typeof (iMinViewport) === 'undefined' || iMinViewport.value?.type === 'comma') ? length(320, 'px') : iMinViewport
+              const max = iMinViewport?.value?.type === 'comma' ? comma3 : iMaxViewport
+              const maxViewport = typeof (max) === 'undefined' ? length(1280, 'px') : max
+              return func('min', [
+                maxSize,
+                token('comma'),
+                func('max', [
+                  minSize,
+                  token('comma'),
+                  func('calc', [
+                    minSize,
+                    delim('+'),
+                    num(maxSize?.value?.value - minSize?.value?.value),
+                    delim('*'),
+                    token('parenthesis-block'),
+                    token('parenthesis-block'),
+                    length(100, 'vw'),
+                    delim('-'),
+                    minViewport,
+                    token('close-parenthesis'),
+                    delim('/'),
+                    num(maxViewport?.value?.value - minViewport?.value.value),
+                    token('close-parenthesis')
+                  ])
+                ])
+              ])
+            }
+          }
+        }
+      })
+
+      return code.toString()
+    }
+  }
+}
+
+export default llsCssModuleMacroPlugin

package/src/llsCssSsrCollectPlugin.mjs

@@ -0,0 +1,25 @@
+/**
+ * flushStyles() method that generates and return <style> tag with refreshed style
+ */
+import { transform } from 'lightningcss'
+const llsCssSsrCollectPlugin = () => {
+  const cssIds = new Map()
+  return {
+    name: 'lls:llsCssSsrCollectPlugin',
+    transform (src, id) {
+      if (/module\.css$/.test(id)) {
+        cssIds.set(id, src)
+      }
+    },
+    flushStyles () {
+      const css = [...cssIds.values()].join('\n')
+
+      // when hmr, id changes but not css-selector so we get two rules with the same css-selector
+      // we dedupe the rules so old rule is now stripped.
+      const { code } = transform({ code: Buffer.from(css) })
+      return `<style id="cssmodule-ssr-collect-plugin">${code.toString()}</style>`
+    }
+  }
+}
+
+export default llsCssSsrCollectPlugin

package/src/llsLadlePlugin.mjs

@@ -0,0 +1,16 @@
+const llsLadlePlugin = (sbFolder) => ({
+  name: 'lls:llsLadlePlugin',
+  config (config, { command }) {
+    const ladleCiEnv = /prod|tag|master|v\d/.test(process.env.LADLE_DEST) ? 'prod' : 'dev'
+    return {
+      base: command === 'serve' ? '/' : `https://build.lelivrescolaire.fr/storybook/${sbFolder}-${ladleCiEnv}/`,
+      // base: command === 'serve' ? '/' : 'http://localhost:5000/ladledist/',
+
+      build: {
+        minify: false
+      }
+    }
+  }
+})
+
+export default llsLadlePlugin

package/src/llsLinariaImportsPlugin.mjs

@@ -0,0 +1,19 @@
+const llsLinariaImports = ({ client } = {}) => {
+  return {
+    name: 'lls:linaria-imports',
+    load (id) {
+      console.log('llsLinariaImports plugin is deprecated, remove usage. Already handled by llsSideRefreshMetaPlugin')
+      if (client) return
+      if (id.endsWith('@lls/viewer/lib/assets/viewer.css')) { return '' }
+      if (id.endsWith('@lls/superkit/lib/assets/superkit.css')) { return '' }
+      if (id.endsWith('@lls/lls-kit/lib/assets/lls-kit.css') || id.endsWith('@lls/lls-kit/lib/assets/lls-kit-fonts.css')) {
+        return ''
+      }
+      if (id.endsWith('@lls/lls-drawer/lib/assets/lls-drawer.css')) { return '' }
+      if (id.endsWith('@lls/lls-code/lib/assets/lls-code.css')) { return '' }
+      if (id.endsWith('@lls/core/lib/assets/core.css')) { return '' }
+    }
+  }
+}
+
+export default llsLinariaImports

package/src/llsLinariaSsrCollectPlugin.mjs

@@ -0,0 +1,32 @@
+/**
+ * Plugin that collects styles from linaria cache to inject it in the page.
+ * @returns config() method that instantiates linariaPlugin
+ * resolveId() method that filters files to be added to css set
+ * flushStyles() method that generates and return <style> tag with refreshed style
+ */
+import { transform } from 'lightningcss'
+const llsLinariaSsrCollectPlugin = () => {
+  const cssIds = new Set()
+  let linariaPlugin
+  return {
+    name: 'lls:llsLinariaSsrCollect',
+    /* we enforce pre because if vite-plugin-linaria resolves id, vite4 won't call us. Since we do not resolve, we can be put before */
+    enforce: 'pre',
+    config (config) {
+      linariaPlugin = config.plugins.find(plugin => plugin.name === 'linaria')
+    },
+    async resolveId (id, from) {
+      if (id.includes('@linaria-cache')) { cssIds.add(id) }
+    },
+    flushStyles () {
+      const css = [...cssIds].map(linariaPlugin.load).join('\n')
+
+      // when hmr, id changes but not css-selector so we get two rules with the same css-selector
+      // we dedupe the rules so old rule is now stripped.
+      const { code } = transform({ code: Buffer.from(css) })
+      return `<style id="linaria-ssr-collect-plugin">${code.toString()}</style>`
+    }
+  }
+}
+
+export default llsLinariaSsrCollectPlugin

package/src/llsRequirePlugin.mjs

@@ -0,0 +1,26 @@
+/**
+ * Plugin using vite-plugin-require-transform, used to transform require syntax to import
+ * Needed when we use viewer in sideRefresh
+ * @returns the plugin with its transform method
+ */
+const llsSsrRequirePlugin = async () => {
+  const VitePluginRequireTransform = await import('vite-plugin-require-transform').then(m => m.default)
+  // Lazy loaded viewer modules that are using require syntax
+  const fileRegex = /(?:(Audio|Playlist|Recorder|Python|Video|QuestionRich|CodemirrorEditor|useLazyModule)\.jsx$|@lls_lls-code)/
+  const back = VitePluginRequireTransform({ fileRegex })
+  return {
+    name: 'lls:require',
+    transform: async function (code, id) {
+      const { transform } = await back
+      if (fileRegex.test(id)) {
+        code = code.replace(/interop\(require\(['"][^'"]+\.browser['"]\)\)/, '() => null')
+      }
+      return {
+        ...await transform.apply(this, [code, id]),
+        map: null
+      }
+    }
+  }
+}
+
+export default llsSsrRequirePlugin

package/src/llsSideRefreshMetaPlugin.mjs

@@ -0,0 +1,149 @@
+import fs from 'fs'
+import path from 'path'
+
+// sideRefreshActiveModules is of the form ['viewer', 'superkit', ...] with 'viewer' if repo launched
+// WITH_VIEWER=1 npm start
+export const makeSideRefreshThemeInterceptor = async (sideRefreshActiveModules) => {
+  const parentDir = path.basename(path.dirname(process.cwd()))
+  const sideRefreshThemes = {}
+  if (sideRefreshActiveModules.length) {
+    const cssThemeMap = {
+      viewer: '@lls/viewer/lib/css-bare.mjs',
+      // kit: no themes for kit
+      superkit: '@lls/superkit/lib/css-bare.mjs',
+      core: '@lls/core/lib/css-bare.mjs',
+      audio: '@lls/lls-audio/lib/css-bare.mjs',
+      code: '@lls/lls-code/lib/css-bare.mjs'
+    }
+    await Promise.all(sideRefreshActiveModules.map(sideRefreshName => {
+      if (!cssThemeMap[sideRefreshName]) {
+        throw new Error('invalid side refresh name' + sideRefreshName)
+      }
+      return import(cssThemeMap[sideRefreshName]).then(m => {
+        const mod = m.default || m
+        sideRefreshThemes[`${sideRefreshName}_dark`] = mod.themeIsDarkMode
+        sideRefreshThemes[`${sideRefreshName}_free`] = mod.themeIsFreeMode
+        sideRefreshThemes[`${sideRefreshName}_light`] = mod.themeIsNotDarkMode
+      })
+    }))
+  }
+  const folderRegex = new RegExp(Object.keys(sideRefreshThemes).map(capName => parentDir + '/' + capName.split('_')[0]).join('|'))
+  return (cap, id, next) => {
+    const match = id.match(folderRegex)?.[0]
+    cap = match ? `${match.split('/')[1]}_${cap}` : cap
+    return match && sideRefreshThemes[cap] ? sideRefreshThemes[cap] : next(cap)
+  }
+}
+
+/**
+ * Side refresh plugin for LLS clients
+ * @param {*} param specifies which dependency is beign sideRefreshed
+ * @returns a plugin to pass to vite and aliases for sideRefreshed packages
+ */
+const llsSideRefreshMetaPlugin = ({ audio: iAudio, viewer: iViewer, superkit: iSuperkit, kit: iKit, utils: iUtils, core: iCore, code: iCode }, { client, publicDir = 'ladleassets' } = {}) => {
+  const pwd = process.cwd()
+  let activeModules = []
+  if ([iViewer, iSuperkit, iKit, iUtils, iCore, iCode, iAudio].some(x => x)) {
+    activeModules = [
+      iViewer && 'viewer',
+      iSuperkit && 'superkit',
+      iKit && 'kit',
+      iUtils && 'utils',
+      iCore && 'core',
+      iCode && 'code',
+      iAudio && 'audio'
+    ].filter(Boolean)
+    // eslint-disable-next-line no-console
+    console.log('sideResfresh: ', activeModules)
+  }
+
+  const makeResolver = (dirname, aliasImport) => {
+    const projectPath = path.resolve(pwd, '../', dirname)
+    const projectDir = path.join(projectPath, 'src/')
+    const projectDirs = fs.readdirSync(projectDir).map(x => x.replace(/\.[jt]sx?$/, ''))
+    return {
+      async resolve (id, from) {
+        if (projectDirs.some(dir => id.startsWith(dir))) {
+          try {
+            const resolution = await this.resolve(projectDir + id, from, { skipSelf: true })
+            return resolution.id
+          } catch (e) {
+          }
+        }
+      },
+      alias: {
+        // kit has no public/assets folder, and should fallback to next case (/lib)
+        ...(dirname === 'lls-kit'
+          ? {}
+          : { ['@lls/' + dirname + '/lib/assets']: path.join(projectPath, 'static/assets') }
+        ),
+        // handle multiple cases : @lls/superkit/lib, @lls/superkit, @superkit, or alias import
+        ['@lls/' + dirname + '/lib']: path.join(projectPath, 'src'),
+        ['@lls/' + dirname]: path.join(projectPath, 'src/index'),
+        ['@' + dirname]: path.join(projectPath, 'src'),
+        [aliasImport || '@' + dirname]: path.join(projectPath, 'src')
+      },
+      shouldResolve (from) {
+        return from.includes(dirname)
+      }
+    }
+  }
+  const makeNoopResolver = () => ({
+    shouldResolve: () => false,
+    alias: {}
+  })
+  const viewer = (iViewer && makeResolver('viewer')) || makeNoopResolver()
+  const superkit = (iSuperkit && makeResolver('superkit')) || makeNoopResolver()
+  const kit = (iKit && makeResolver('lls-kit', '@kit')) || makeNoopResolver()
+  const utils = (iUtils && makeResolver('utils', 'commons')) || makeNoopResolver()
+  const core = (iCore && makeResolver('core', '@core')) || makeNoopResolver()
+  const code = (iCode && makeResolver('lls-code', '@code')) || makeNoopResolver()
+  const audio = (iAudio && makeResolver('lls-audio', '@audio')) || makeNoopResolver()
+
+  const VIRTUAL_ID = 'sideRefresh/node_modules' // specify node_modules to bypass linaria plugin parsing css file... (cant tweak exclude regex)
+  const key = basename => path.join(pwd, publicDir, 'assets', basename)
+  const loads = new Map(['core.css', 'viewer.css', 'superkit.css', 'lls-kit.css', 'lls-kit-fonts.css', 'lls-audio.css', 'lls-code.css', 'lls-audio.css'].map(basename => {
+    let promise = ''
+    const getPromise = () => {
+      if (client && !pwd.includes(basename.replace('.css', ''))) {
+        promise = fs.promises.readFile(key(basename), 'utf8')
+      }
+      return promise
+    }
+    return [VIRTUAL_ID + key(basename), getPromise]
+  }))
+  const plugin = () => ({
+    name: 'lls:sideRefresh',
+    async resolveId (id, from) {
+      const basename = path.basename(id)
+      if (['core.css', 'viewer.css', 'superkit.css', 'lls-kit.css', 'lls-kit-fonts.css', 'lls-audio.css', 'lls-code.css', 'lls-audio.css'].includes(basename)) {
+        return VIRTUAL_ID + key(basename)
+      }
+      if (viewer.shouldResolve(from)) { return viewer.resolve.call(this, id, from) }
+      if (superkit.shouldResolve(from)) { return superkit.resolve.call(this, id, from) }
+      if (kit.shouldResolve(from)) { return kit.resolve.call(this, id, from) }
+      if (utils.shouldResolve(from)) { return utils.resolve.call(this, id, from) }
+      if (core.shouldResolve(from)) { return core.resolve.call(this, id, from) }
+      if (code.shouldResolve(from)) { return code.resolve.call(this, id, from) }
+      if (audio.shouldResolve(from)) { return audio.resolve.call(this, id, from) }
+    },
+
+    async load (id) {
+      if (loads.has(id)) {
+        return loads.get(id)()
+      }
+    }
+  })
+  const alias = {
+    ...viewer.alias,
+    ...superkit.alias,
+    ...kit.alias,
+    ...utils.alias,
+    ...core.alias,
+    ...code.alias,
+    ...audio.alias
+  }
+  return { plugin, alias, activeModules }
+}
+
+export default llsSideRefreshMetaPlugin

package/src/llsVitestMockPlugin.mjs

@@ -0,0 +1,14 @@
+const llsVitestMock = () => ({
+  name: 'lls:vitestmock',
+  transform (code, id) {
+    if (id.endsWith('@lls/viewer/lib/index.js')) {
+      return code
+        .replace(/require\("(@lls\/lls-audio|@lls\/lls-code|@yorab\/react-paint)"\)/g, (__, cap) => {
+          if (cap === '@lls/lls-audio') return '{__esModule: true, default: () => null, Recorder: () => null}'
+          return '{__esModule: true, default: () => null}'
+        })
+    }
+  }
+})
+
+export default llsVitestMock

package/src/postBuildAutoprefixerPlugin.mjs

@@ -0,0 +1,15 @@
+import fs from 'fs'
+
+const esbuildAutoprefixerPlugin = async ({ from, to, lightningcssOptions: { minify = false } = {} }) => {
+  const [{ transform, browserslistToTargets }, browserslist] = await Promise.all([import('lightningcss'), import('browserslist').then(m => m.default)])
+  const contents = await fs.promises.readFile(from).then(async buf => {
+    const { code } = transform({
+      code: buf,
+      targets: browserslistToTargets(browserslist('cover 99.5%')),
+      minify
+    })
+    return code.toString()
+  })
+  return fs.promises.writeFile(to, contents)
+}
+export default esbuildAutoprefixerPlugin

package/src/postBuildTsTypes.mjs

@@ -0,0 +1,36 @@
+import fs from 'node:fs/promises'
+import path from 'path'
+import { exec } from 'child_process'
+import util from 'util'
+const execp = util.promisify(exec)
+
+const getDirectoryFileNames = async directory => {
+  const fileNames = []
+  const filesInDirectory = await fs.readdir(directory)
+  for (const fileName of filesInDirectory) {
+    const absolute = path.join(directory, fileName)
+    if ((await fs.stat(absolute)).isDirectory()) {
+      fileNames.push(...await getDirectoryFileNames(absolute))
+    } else {
+      fileNames.push(absolute)
+    }
+  }
+  return fileNames
+}
+
+const postBuildTstypes = async ({ rootAliases = [] }) => {
+  try {
+    await fs.access('./builttypes', fs.constants.F_OK)
+  } catch (e) {
+    return
+  }
+  const fileNames = await getDirectoryFileNames('./builttypes')
+  const rootAliasRegex = new RegExp(rootAliases.map(x => x + '/').join('|') || 'nevermatching/', 'g')
+  for (const fileName of fileNames) {
+    await fs.readFile(fileName, 'utf8').then(
+      str => str.replaceAll(rootAliasRegex, `${path.relative(fileName, 'builttypes').slice(1)}/`) // builttypes/index.ts will be resolved to '..' so we always remove the first dot
+    ).then(outStr => fs.writeFile(fileName, outStr))
+  }
+  await execp('cp -r builttypes/. lib')
+}
+export default postBuildTstypes