gardenjs 1.5.0 → 1.6.1

package/bin/servegarden.js

@@ -249,6 +249,22 @@ export default {
     ${renderer}
   },
 
+  // Option to generate component names in the component tree from dasFileName using your own function. e.g.:
+  //  getComponentName: (dasFileName) => {
+  //    return dasFileName.substring(0, dasFileName.indexOf('.das')
+  //  }
+  //
+  // Option to generate component file names from dasFileName using your own function. Must return an array. First match will be used. e.g.:
+  //  getComponentFileNames: (dasFileName) => {
+  //    const nameWithoutExtension = dasFileName.substring(0, dasFileName.indexOf('.das')
+  //    return [
+  //      nameWithoutExtension + '.svelte',
+  //      nameWithoutExtension + '.vue',
+  //      nameWithoutExtension + '.tsx',
+  //      nameWithoutExtension,
+  //    ]
+  //  }
+
   // Add global style files needed for your project:
   // additional_style_files: [
   //   'src/assets/scss/main.scss'
@@ -336,19 +352,8 @@ ${viteLibs.importStmts.join('\n')}
 export default defineConfig(({ command, mode }) => {
   return {
     plugins: [${viteLibs.pluginStmts.join(', ')}],
-    root: ".garden",
-    assetsInclude: ['**/*.md'],
-    publicDir: "../public",
     ${sveltekit_alias}
     ${optimizeDeps}
-    build: {
-      rollupOptions: {
-        input: {
-          app: ".garden/index.html",
-          frame: ".garden/frame.html",
-        },
-      },
-    },
   };
 });
   `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gardenjs",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "A component library explorer for UI development, testing and documentation.",
   "repository": "https://github.com/gardenjs/gardenjs",
   "homepage": "https://gardenjs.org/",
@@ -52,8 +52,8 @@
     "lint": "eslint src/."
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "6.1.0",
     "@eslint/compat": "1.2.5",
+    "@sveltejs/vite-plugin-svelte": "6.1.0",
     "eslint": "9.31.0",
     "eslint-config-prettier": "10.1.5",
     "eslint-plugin-svelte": "3.11.0",
@@ -70,6 +70,7 @@
     "@inquirer/checkbox": "1.5.0",
     "@inquirer/prompts": "3.3.0",
     "@inquirer/select": "^2.0.0",
+    "chokidar": "^5.0.0",
     "highlight.js": "11.11.1",
     "marked": "4.3.0",
     "node-watch": "0.7.4",

package/src/codegenerator/base_generator.js

@@ -7,8 +7,14 @@ const pathRelativeToGarden = '../'
 const destination = '.garden/'
 
 export async function generateGardenBase() {
-  const { structure, additional_style_files, welcome_page, devmodus } =
-    await getConfig()
+  const {
+    structure,
+    additional_style_files,
+    welcome_page,
+    devmodus,
+    getComponentFileNames,
+    getComponentName,
+  } = await getConfig()
   const targetBaseFile = destination + 'base.js'
   const targetComponentMapFile = destination + 'component_import_map.js'
   const targetRawComponentMapFile = destination + 'raw_component_import_map.js'
@@ -18,8 +24,29 @@ export async function generateGardenBase() {
 
   const basefolders = getDasBaseFolders(structure)
 
+  const defaultGetComponentFileNames = (dasFilename) => {
+    const name = dasFilename.substring(0, dasFilename.indexOf('.das'))
+    return [
+      name + '.svelte',
+      name + '.vue',
+      name + '.tsx',
+      name + '.jsx',
+      name + '.ts',
+      name + '.js',
+      name,
+    ]
+  }
+
+  const defaultGetComponentName = (dasFilename) => {
+    return dasFilename.substring(0, dasFilename.indexOf('.das'))
+  }
+
   const cds = await basefolders.reduce(async (acc, basePathAndNode) => {
-    const filemetaAndDasArray = await findAndReadDasFiles(basePathAndNode)
+    const filemetaAndDasArray = await findAndReadDasFiles(
+      basePathAndNode,
+      getComponentName ?? defaultGetComponentName,
+      getComponentFileNames ?? defaultGetComponentFileNames
+    )
     try {
       return (await acc).concat(
         filemetaAndDasArray.map(createComponentDescription)
@@ -267,6 +294,8 @@ function createComponentMapEntry(description) {
 function createDasMapEntry(description) {
   return `'${description.fullname}': {
     ...${description.fullname}Das,
+    name: '${description.name}',
+    file: '${description.file}',
     ${
       description.decorators
         ? 'decorators: [' +
@@ -312,6 +341,7 @@ function createComponentDescription({
   const file = das.file
     ? path.join(basepath, relativepath, das.file)
     : undefined
+  const relativeFile = das.file
   const dasfile = path.join(basepath, relativepath, filename)
   const descriptionfile = das.description?.endsWith('.md')
     ? path.join(basepath, relativepath, das.description)
@@ -365,6 +395,7 @@ function createComponentDescription({
     relativepath,
     fullpath,
     file,
+    relativeFile,
     dasfile,
     descriptionfile,
     extension,

package/src/codegenerator/das_file_finder.js

@@ -2,11 +2,19 @@ import fs from 'fs'
 import path from 'path'
 import { createHash } from 'crypto'
 
-export async function findAndReadDasFiles({ basepath, navbasenode }) {
+export async function findAndReadDasFiles(
+  { basepath, navbasenode },
+  getComponentName,
+  getComponentFileNames
+) {
   const uniqueNames = {}
   const promises = (await findDasFiles(basepath)).map(async (file) => {
     try {
-      const das = await readDasFile(file)
+      const das = await readDasFile(
+        file,
+        getComponentName,
+        getComponentFileNames
+      )
       await validate(das, file)
       makeNameUnique(das, navbasenode, file.relativepath, uniqueNames)
       uniqueNames[navbasenode + file.relativepath + das.name] = true
@@ -157,7 +165,11 @@ async function findDasFiles(
   })
 }
 
-async function readDasFile({ filename, relativepath, basepath }) {
+async function readDasFile(
+  { filename, relativepath, basepath },
+  getComponentName,
+  getComponentFileNames
+) {
   let content = await fs.promises.readFile(
     path.resolve(basepath, relativepath, filename),
     { encoding: 'utf-8' }
@@ -169,7 +181,22 @@ async function readDasFile({ filename, relativepath, basepath }) {
       '?' +
       createMd5Hash(content)
   )
-  return module.default
+  const dasContent = module.default
+  if (!dasContent.name) {
+    dasContent.name = getComponentName(filename)
+  }
+  if (!dasContent.file) {
+    const potentialFileNames = getComponentFileNames(filename)
+    let allFiles = await fs.promises.readdir(
+      path.resolve(basepath, relativepath)
+    )
+    dasContent.file = potentialFileNames.find((candidate) => {
+      return allFiles.some((file) => {
+        return file === candidate
+      })
+    }, null)
+  }
+  return dasContent
 }
 
 function createMd5Hash(str) {

package/src/codegenerator/watch.js

@@ -1,4 +1,4 @@
-import fswatch from 'node-watch'
+import chokidar from 'chokidar'
 
 export function watch(directories, options = {}, onChange) {
   directories.forEach((dir) => doWatch(dir, options, onChange))
@@ -6,17 +6,26 @@ export function watch(directories, options = {}, onChange) {
 
 let waitForUpdate = false
 
+const handleChange = (options, onChange) => (path) => {
+  if (waitForUpdate) {
+    return
+  }
+  if (watchFileType(path, options)) {
+    waitForUpdate = true
+    onChange()
+    setTimeout(() => (waitForUpdate = false), 400)
+  }
+}
+
 function doWatch(dir, options, onChange) {
-  fswatch(dir, { recursive: true }, (_evt, filename) => {
-    if (waitForUpdate) {
-      return
-    }
-    if (watchFileType(filename, options)) {
-      waitForUpdate = true
-      onChange()
-      setTimeout(() => (waitForUpdate = false), 400)
-    }
-  })
+  const onChangeFunc = handleChange(options, onChange)
+  chokidar
+    .watch(dir)
+    .on('change', onChangeFunc)
+    .on('add', onChangeFunc)
+    .on('addDir', onChangeFunc)
+    .on('unlink', onChangeFunc)
+    .on('unlinkDir', onChangeFunc)
 }
 
 function watchFileType(filename, options) {

package/src/server.js

@@ -15,17 +15,33 @@ export async function createServer() {
   const configFile = vite_config || './vite.config.js'
 
   const server = await createViteServer({
-    configFile,
+    configFile: configFile,
+    root: path.resolve('.garden'),
+    base: '/',
+    assetsInclude: ['**/*.md'],
+    publicDir: '../public',
     optimizeDeps: {
       noDiscovery: true,
     },
+    build: {
+      rollupOptions: {
+        input: {
+          app: path.resolve('.garden/index.html'),
+          frame: path.resolve('.garden/frame.html'),
+        },
+      },
+    },
     server: {
       port: serverport,
       fs: {
-        cachedChecks: false,
+        allow: [path.resolve('.garden')],
+      },
+      watch: {
+        ignored: ['!**/.garden/**'],
       },
     },
   })
+
   await runWatch(server)
 
   if (devmodus) {
@@ -33,6 +49,9 @@ export async function createServer() {
   }
 
   server.listen()
+
+  // vite-Bug, if we don't restart server.watch.ignored will not work
+  server.restart()
   if (!no_open_browser) open(`http://localhost:${serverport}`)
 }