@lls/vitescripts 1.0.1 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lls/vitescripts",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "lls vite plugins",
   "main": "src/index.mjs",
   "files": [
@@ -14,5 +14,8 @@
   },
   "type": "module",
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "@lls/eslint-config-lls": "1.1.12"
+  }
 }

package/src/llsAssetsPlugin.mjs

@@ -2,11 +2,16 @@ import fs from 'fs'
 import { promisify } from 'util'
 import { exec } from 'node:child_process'
 import path from 'path'
-import VitePluginRequireTransform from 'vite-plugin-require-transform'
 const execP = promisify(exec)
-const pwd = process.cwd()
 
 // 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') => {
   const publicAssetDir = path.join(publicDir, 'assets')
   const fileExists = (s) => new Promise(resolve => fs.access(s, e => resolve(!e)))
@@ -14,7 +19,7 @@ const llsAssetsPlugin = (llsRepos, publicDir = 'ladleassets') => {
   const storyRoot = process.cwd() + '/stories'
   return {
     name: 'lls:copyassets',
-    async config(conf, { command }) {
+    async config() {
       await execP(`mkdir -p ${publicAssetDir}`)
       const repoArgs = await Promise.all(llsRepos.map(async repo => {
         if (!repo.startsWith('@')) return repo

package/src/llsLadlePlugin.mjs

@@ -1,11 +1,3 @@
-import fs from 'fs'
-import { promisify } from 'util'
-import { exec } from 'node:child_process'
-import path from 'path'
-import VitePluginRequireTransform from 'vite-plugin-require-transform'
-const execP = promisify(exec)
-const pwd = process.cwd()
-
 const llsLadlePlugin = (sbFolder) => ({
   name: 'lls:llsLadlePlugin',
   config(config, { command }) {
@@ -21,4 +13,4 @@ const llsLadlePlugin = (sbFolder) => ({
   }
 })
 
-export default llsLadlePlugin
+export default llsLadlePlugin

package/src/llsLinariaImportsPlugin.mjs

@@ -1,11 +1,3 @@
-import fs from 'fs'
-import { promisify } from 'util'
-import { exec } from 'node:child_process'
-import path from 'path'
-import VitePluginRequireTransform from 'vite-plugin-require-transform'
-const execP = promisify(exec)
-const pwd = process.cwd()
-
 const llsLinariaImports = () => {
   return {
     name: 'lls:linaria-imports',

package/src/llsLinariaSsrCollectPlugin.mjs

@@ -1,27 +1,29 @@
-import fs from 'fs'
-import { promisify } from 'util'
-import { exec } from 'node:child_process'
-import path from 'path'
-import VitePluginRequireTransform from 'vite-plugin-require-transform'
-const execP = promisify(exec)
-const pwd = process.cwd()
-
+/**
+ * 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
+ */
 const llsLinariaSsrCollectPlugin = () => {
   const cssIds = new Set()
   let linariaPlugin
   return {
     name: 'lls:llsLinariaSsrCollect',
-    config (config) {
+    config(config) {
       linariaPlugin = config.plugins.find(plugin => plugin.name === 'linaria')
     },
     async resolveId(id, from) {
-      if (id.includes('@linaria-cache')) { cssIds.add(id); return }
+      if (id.includes('@linaria-cache')) { cssIds.add(id) }
     },
+    flushStyles() {
+      const back = `<style id="linaria-ssr-collect-plugin">${[...cssIds].map(linariaPlugin.load).join('\n')}</style>`
+      // linaria plugin keeps cache. But we dont want to keep ids which have changed (updating a css component)
+      // css is removed from client anyway but still be accurate
+      cssIds.clear()
 
-    collectSsrStyles () {
-      return `<style>${[...cssIds].map(linariaPlugin.load).join('\n')}</style>`
+      return back
     }
   }
 }
 
-export default llsLinariaSsrCollectPlugin
+export default llsLinariaSsrCollectPlugin

package/src/llsRequirePlugin.mjs

@@ -1,13 +1,12 @@
-import fs from 'fs'
-import { promisify } from 'util'
-import { exec } from 'node:child_process'
-import path from 'path'
 import VitePluginRequireTransform from 'vite-plugin-require-transform'
-const execP = promisify(exec)
-const pwd = process.cwd()
 
-// needed for viewer if siderefresh
+/**
+ * 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 = () => {
+  // Lazy loaded viewer modules that are using require syntax
   const fileRegex = /(?:(Audio|Recorder|Python|Video|QuestionRich|CodemirrorEditor|useLazyModule)\.jsx$|@lls_lls-code)/
   const back = VitePluginRequireTransform({ fileRegex })
   return {
@@ -25,4 +24,4 @@ const llsSsrRequirePlugin = () => {
   }
 }
 
-export default llsSsrRequirePlugin
+export default llsSsrRequirePlugin

package/src/llsSideRefreshMetaPlugin.mjs

@@ -1,42 +1,50 @@
 import fs from 'fs'
-import { promisify } from 'util'
-import { exec } from 'node:child_process'
 import path from 'path'
-import VitePluginRequireTransform from 'vite-plugin-require-transform'
-const execP = promisify(exec)
 const pwd = process.cwd()
 
+/**
+ * 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 }) => {
+  if (!iViewer && !iSuperkit && !iKit && !iUtils) { return { plugin: () => false, alias: {} } }
+  // eslint-disable-next-line no-console
+  console.log('sideResfresh: ', [
+    iViewer && 'viewer',
+    iSuperkit && 'superkit',
+    iKit && 'kit',
+    iUtils && 'utils']
+    .filter(Boolean))
 
-const llsSideRefreshMetaPlugin = ({
-  viewer: iViewer = process.env.WITH_VIEWER === '1',
-  superkit: iSuperkit = process.env.WITH_SUPERKIT === '1', 
-  kit: iKit = process.env.WITH_KIT === '1'
-}) => {
-  if (!iViewer && !iSuperkit && !iKit) { return { plugin: () => false, alias: {} } }
-  console.log('sideResfresh: ', [iViewer && 'viewer', iSuperkit && 'superkit', iKit && 'lls-kit'].filter(Boolean))
-  const makeResolver = dirname => {
-    const viewerPath = path.resolve(pwd, '../', dirname)  
-    const viewerDir = path.join(viewerPath, 'src/')
-    const viewerDirs = fs.readdirSync(viewerDir).map(x => x.replace(/\.[jt]sx?$/,''))
+  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 (viewerDirs.some(dir => id.startsWith(dir))) {
+      async resolve(id, from) {
+        if (projectDirs.some(dir => id.startsWith(dir))) {
           try {
-            const resolution = await this.resolve(viewerDir + id, from, { skipSelf: true })
+            const resolution = await this.resolve(projectDir + id, from, { skipSelf: true })
             return resolution.id
           } catch (e) {
-            return
           }
         }
       },
       alias: {
-        ['@lls/'+dirname+'/lib/assets'] : path.join(viewerPath, 'public/assets'),
-        ['@lls/'+dirname+'/lib'] : path.join(viewerPath, 'src'),
-        ['@lls/'+dirname]: path.join(viewerPath, 'src/index.jsx'),
-        ['@'+dirname]: path.join(viewerPath, 'src')
+        // kit has no public/assets folder, and should fallback to next case (/lib)
+        ...(dirname === 'lls-kit'
+          ? {}
+          : { ['@lls/' + dirname + '/lib/assets']: path.join(projectPath, 'public/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) && !from.includes('webview')
+      shouldResolve(from) {
+        return from.includes(dirname)
       }
     }
   }
@@ -44,35 +52,37 @@ const llsSideRefreshMetaPlugin = ({
     shouldResolve: () => false,
     alias: {}
   })
-  const viewer = iViewer && makeResolver('viewer') || makeNoopResolver()
-  const superkit = iSuperkit && makeResolver('superkit') || makeNoopResolver()
-  const kit = iKit && makeResolver('lls-kit') || makeNoopResolver()
-  
+  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 plugin = () => ({
     name: 'lls:sideRefresh',
-    async resolveId (id, from) {
+    async resolveId(id, from) {
+      // viewer.css, superkit.css etc.. are part of the assets so they should not be resolved in project folder
       if (id.endsWith('viewer.css') && from.includes('viewer')) { return 'llslinaria' }
       if (id.endsWith('superkit.css') && from.includes('superkit')) { return 'llslinaria' }
-      if (id.endsWith('lls-kit.css') && from.includes('lls-kit')) { return 'llslinaria' }
+      if ((id.endsWith('lls-kit.css') || id.endsWith('lls-kit-fonts.css')) && from.includes('lls-kit')) { return 'llslinaria' }
+
+      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) }
     },
 
-    load (id) {
+    load(id) {
       if (id === 'llslinaria') { return '' }
     }
   })
   const alias = {
     ...viewer.alias,
-    ...superkit.alias
+    ...superkit.alias,
+    ...kit.alias,
+    ...utils.alias
   }
-  plugin.ssrOptions = { noExternal: [
-    iViewer && '@lls/viewer',
-    iSuperkit && '@lls/superkit',
-    iKit && '@lls/lls-kit'
-  ].filter(Boolean) }
   return { plugin, alias }
 }
 
-export default llsSideRefreshMetaPlugin
+export default llsSideRefreshMetaPlugin

package/src/llsVitestMockPlugin.mjs

@@ -1,11 +1,3 @@
-import fs from 'fs'
-import { promisify } from 'util'
-import { exec } from 'node:child_process'
-import path from 'path'
-import VitePluginRequireTransform from 'vite-plugin-require-transform'
-const execP = promisify(exec)
-const pwd = process.cwd()
-
 const llsVitestMock = () => ({
   name: 'lls:vitestmock',
   transform(code, id) {