@lls/vitescripts 2.0.20 → 2.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/vitescripts",
-  "version": "2.0.20",
+  "version": "2.0.22",
   "description": "lls vite plugins",
   "main": "src/index.mjs",
   "files": [

package/src/esbuildCssModulePlugin.mjs

@@ -13,8 +13,7 @@ export default ({ prefix = '', llsCssModuleMacroPluginArg }) => {
   return [
     {
       name: 'lls-cssmodule',
-        async setup(build) {
-
+      async setup (build) {
         await fs.promises.mkdir(tmpDir, { recursive: true })
         const llsCssModuleMacroPluginInstance = await llsCssModuleMacroPlugin(llsCssModuleMacroPluginArg)
 
@@ -41,4 +40,4 @@ export default ({ prefix = '', llsCssModuleMacroPluginArg }) => {
     },
     esbuildCssModule
   ]
-}
+}

package/src/index.mjs

@@ -7,4 +7,4 @@ 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 esbuildCssModulePlugin } from './esbuildCssModulePlugin.mjs'

package/src/llsAssetsPlugin.mjs

@@ -19,7 +19,7 @@ const llsAssetsPlugin = (llsRepos, publicDir = 'ladleassets', { stripRoot = true
   const storyRoot = process.cwd() + '/stories'
   return {
     name: 'lls:copyassets',
-    async config() {
+    async config () {
       await execP(`mkdir -p ${publicAssetDir}`)
       const repoArgs = await Promise.all(llsRepos.map(async repo => {
         if (!repo.startsWith('@')) return repo
@@ -34,21 +34,23 @@ const llsAssetsPlugin = (llsRepos, publicDir = 'ladleassets', { stripRoot = true
         await execP(`cp -rf ${repo} ${publicAssetDir}`)
       }
     },
-    ...(stripRoot && {transform(src, id) {
-      if (
-        llsRepos.some(repo => id.includes(repo)) ||
+    ...(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
+          return {
+            code: src.replace(/(= |url\(|Worker\()(['"])\/assets/g, '$1$2assets'),
+            map: null
+          }
         }
       }
-    }})
+    })
   }
 }
 

package/src/llsCssModuleMacroPlugin.mjs

@@ -1,6 +1,7 @@
 import { transform as lightTransform } from 'lightningcss'
+import { makeSideRefreshThemeInterceptor } from './llsSideRefreshMetaPlugin.mjs'
 
-const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, themeIsNotDarkMode }) => {
+const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, themeIsNotDarkMode, sideRefreshActiveModules = [] }) => {
   const keepProperties = [
     'Supporting',
     'Button1',
@@ -29,12 +30,19 @@ const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, theme
     light: themeIsNotDarkMode
   }
   const replaceKitBag = (__, cap) => kitBag[cap]
-  const replaceTheme = (__, cap) => {
-    const back = cssMacroTheme[cap]
-    if (!back) {
-      throw new Error('llsCssModuleMacroPlugin::missing definition for '+ cap)
-    }
-    return back
+
+  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 = {
@@ -46,13 +54,7 @@ const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, theme
     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})))))`
-  }
-  const replaceGetFluidSizeV2 = (__, cap) => {
-    const [minSize, maxSize, aMinviewport, aMaxviewport] = cap.split(',')
-    const minViewport = (typeof(aMinviewport) === 'undefined' ||  /^\s*$/.test(aMinviewport)) ? 320 : aMinviewport
-    const maxViewport = (typeof(aMaxviewport) === 'undefined' || /^\s*$/.test(aMaxviewport)) ? 1280 : aMaxviewport
+    const { maxSize, minSize, minViewport, maxViewport } = args
     return `min(${maxSize}px, max(${minSize}px, calc(${minSize}px + (${maxSize} - ${minSize}) * ((100vw - ${minViewport}px) / (${maxViewport} - ${minViewport})))))`
   }
 
@@ -61,17 +63,18 @@ const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, theme
   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) {
+    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, replaceTheme)
-        .replace(/@llsTheme\((dark|light|free)\)/g, replaceTheme)
+        .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)')
@@ -80,27 +83,27 @@ const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, theme
         code: Buffer.from(back),
         visitor: {
           Function: {
-            getTruePx({ arguments: [value] }) {
+            getTruePx ({ arguments: [value] }) {
               return {
-                "type":"function",
-                "value":{
-                  "name":"calc",
+                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}}]}},
+                    { 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
+            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
+              const maxViewport = typeof (max) === 'undefined' ? length(1280, 'px') : max
               return func('min', [
                 maxSize,
                 token('comma'),
@@ -110,25 +113,17 @@ const llsCssModuleMacroPlugin = async ({ themeIsFreeMode, themeIsDarkMode, theme
                   func('calc', [
                     minSize,
                     delim('+'),
-                    token('parenthesis-block'),
-                      maxSize,
-                      delim('-'),
-                      minSize,
-                    token('close-parenthesis'),
+                    num(maxSize?.value?.value - minSize?.value?.value),
                     delim('*'),
                     token('parenthesis-block'),
-                      token('parenthesis-block'),
-                      length(100, 'vw'),
-                      delim('-'),
-                      minViewport,
-                      token('close-parenthesis'),
-                      delim('/'),
-                      token('parenthesis-block'),
-                      maxViewport,
-                      delim('-'),
-                      minViewport,
-                      token('close-parenthesis'),
+                    token('parenthesis-block'),
+                    length(100, 'vw'),
+                    delim('-'),
+                    minViewport,
                     token('close-parenthesis'),
+                    delim('/'),
+                    num(maxViewport?.value?.value - minViewport?.value.value),
+                    token('close-parenthesis')
                   ])
                 ])
               ])

package/src/llsCssSsrCollectPlugin.mjs

@@ -6,12 +6,12 @@ const llsCssSsrCollectPlugin = () => {
   const cssIds = new Map()
   return {
     name: 'lls:llsCssSsrCollectPlugin',
-    transform(src, id) {
+    transform (src, id) {
       if (/module\.css$/.test(id)) {
         cssIds.set(id, src)
       }
     },
-    flushStyles() {
+    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

package/src/llsLadlePlugin.mjs

@@ -1,10 +1,10 @@
 const llsLadlePlugin = (sbFolder) => ({
   name: 'lls:llsLadlePlugin',
-  config(config, { command }) {
+  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/',
+      // base: command === 'serve' ? '/' : 'http://localhost:5000/ladledist/',
 
       build: {
         minify: false

package/src/llsLinariaImportsPlugin.mjs

@@ -1,7 +1,7 @@
 const llsLinariaImports = ({ client } = {}) => {
   return {
     name: 'lls:linaria-imports',
-    load(id) {
+    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 '' }

package/src/llsLinariaSsrCollectPlugin.mjs

@@ -12,13 +12,13 @@ const llsLinariaSsrCollectPlugin = () => {
     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) {
+    config (config) {
       linariaPlugin = config.plugins.find(plugin => plugin.name === 'linaria')
     },
-    async resolveId(id, from) {
+    async resolveId (id, from) {
       if (id.includes('@linaria-cache')) { cssIds.add(id) }
     },
-    flushStyles() {
+    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

package/src/llsSideRefreshMetaPlugin.mjs

@@ -1,25 +1,60 @@
 import fs from 'fs'
 import path from 'path'
-const pwd = process.cwd()
+
+// 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 = ({ viewer: iViewer, superkit: iSuperkit, kit: iKit, utils: iUtils, core: iCore, code: iCode }, { client, publicDir='ladleassets' } = {}) => {
-  let active = false
-  if ([iViewer, iSuperkit, iKit, iUtils, iCore, iCode].some(x => x)) {
-    active = true
-    // eslint-disable-next-line no-console
-    console.log('sideResfresh: ', [
+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'
-    ].filter(Boolean))
+      iCode && 'code',
+      iAudio && 'audio'
+    ].filter(Boolean)
+    // eslint-disable-next-line no-console
+    console.log('sideResfresh: ', activeModules)
   }
 
   const makeResolver = (dirname, aliasImport) => {
@@ -27,7 +62,7 @@ const llsSideRefreshMetaPlugin = ({ viewer: iViewer, superkit: iSuperkit, kit: i
     const projectDir = path.join(projectPath, 'src/')
     const projectDirs = fs.readdirSync(projectDir).map(x => x.replace(/\.[jt]sx?$/, ''))
     return {
-      async resolve(id, from) {
+      async resolve (id, from) {
         if (projectDirs.some(dir => id.startsWith(dir))) {
           try {
             const resolution = await this.resolve(projectDir + id, from, { skipSelf: true })
@@ -48,7 +83,7 @@ const llsSideRefreshMetaPlugin = ({ viewer: iViewer, superkit: iSuperkit, kit: i
         ['@' + dirname]: path.join(projectPath, 'src'),
         [aliasImport || '@' + dirname]: path.join(projectPath, 'src')
       },
-      shouldResolve(from) {
+      shouldResolve (from) {
         return from.includes(dirname)
       }
     }
@@ -62,11 +97,12 @@ const llsSideRefreshMetaPlugin = ({ viewer: iViewer, superkit: iSuperkit, kit: i
   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('code', '@code')) || 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'].map(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', ''))) {
@@ -78,21 +114,21 @@ const llsSideRefreshMetaPlugin = ({ viewer: iViewer, superkit: iSuperkit, kit: i
   }))
   const plugin = () => ({
     name: 'lls:sideRefresh',
-    async resolveId(id, from) {
+    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'].includes(basename)) {
+      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 (id.includes('@linaria-cache')) { return }
       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) {
+    async load (id) {
       if (loads.has(id)) {
         return loads.get(id)()
       }
@@ -104,9 +140,10 @@ const llsSideRefreshMetaPlugin = ({ viewer: iViewer, superkit: iSuperkit, kit: i
     ...kit.alias,
     ...utils.alias,
     ...core.alias,
-    ...code.alias
+    ...code.alias,
+    ...audio.alias
   }
-  return { plugin, alias, active }
+  return { plugin, alias, activeModules }
 }
 
 export default llsSideRefreshMetaPlugin

package/src/llsVitestMockPlugin.mjs

@@ -1,6 +1,6 @@
 const llsVitestMock = () => ({
   name: 'lls:vitestmock',
-  transform(code, id) {
+  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) => {
@@ -11,4 +11,4 @@ const llsVitestMock = () => ({
   }
 })
 
-export default llsVitestMock
+export default llsVitestMock

package/src/postBuildAutoprefixerPlugin.mjs

@@ -3,7 +3,7 @@ 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({
+    const { code } = transform({
       code: buf,
       targets: browserslistToTargets(browserslist('cover 99.5%')),
       minify
@@ -12,4 +12,4 @@ const esbuildAutoprefixerPlugin = async ({ from, to, lightningcssOptions: { mini
   })
   return fs.promises.writeFile(to, contents)
 }
-export default esbuildAutoprefixerPlugin
+export default esbuildAutoprefixerPlugin