gardenjs 0.9.0

package/src/codegenerator/shapes/assets/favicon.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M95.986 39.27c1.459 2.678-5.317 15.083-11.068 22.444-3.834 4.907-8.833 9.694-14.998 14.36-5.46 2.617-9.719 1.964-12.778-1.96-4.589-5.885-4.672-8.292-2.546-12.069 2.125-3.776 7.47-8.074 11.855-10.353 4.386-2.28 14.933-10.291 18.416-14.75.98-1.255 3.606-2.915 4.502-2.843 1.343.107 5.16 2.491 6.617 5.17z" fill="#502299"/><path d="M95.44 32.406c1.258-1.296 2.246-2.147 2.963-2.554.87-.494.572.714.436.888-.47.602-1.278 1.41-2.426 2.426 1.411 1.64 1.828 3.343 1.25 5.11-.159.482-1.993 8.016-2.564 7.206-.57-.81.423-5.07-.839-5.513-.496-.173-4.245 1.045-4.895 1.379-.534.274-.439-.527-.386-.672 1.162-3.165 1.314-5.101.897-4.709-1.291 1.217-6.659 1.775-5.803.68.394-.504 3.773-3.048 6.741-4.42 1.275-.59 2.818-.53 4.627.18z" fill="#89c057"/><path d="M41.628 32.396c1.05-1.424 1.69-1.757 3.898-1.911 1.572-.11 4.488-.497 7.63-.073.438.059 2.553-1.25 7.084-.496 4.982.83 7.033 3.657 7.353 8.239.304 4.347-2.334 23.963-3.26 27.311-.482 1.74-3.587 8.476-9.884 7.653-2.978-.389-4.075-.896-3.9-.957-2.509.827-5.128-1.178-5.78-1.884-1.11-1.199-2.356-7.842-1.862-10.736 1.197-7.013-6.28-20.369-1.28-27.146h.001z" fill="#edc427"/><path d="M51.97 34.967l.026.379c-1.613 1.106-2.188 2.938-1.727 5.497.776 4.302 1.4 10.985 1.546 13.076.147 2.09-1.257 8.382-.8 14.91.263 3.762.226 2.465.194 2.785-.106 1.074 1.493 1.168 1.287 1.182-1.49.104-1.746-.265-2.137-.493-.064-.037-.02-.278-.239-3.41-.416-5.953 1.184-13.05 1.063-14.984-.082-1.318-.63-6.08-1.56-13.02-.422-3.14.36-5.114 2.346-5.922zm6.393-2.218c8.91-.623-.012 39.85-.012 39.85a4 4 0 00-.54.196c-.39.161 8.953-40.01-.407-39.356-.144.01.736-.674.959-.69z" fill="#ed9f27"/><path d="M52.422 28.693c.313-.872.949-2.258 1.909-4.159 1.104.2 1.743.408 1.916.621.265.327-2.358 3.242-1.59 4.05.769.81 2.43.36 3.09.447 3.332.436 4.688.933 3.663.836-.413-.04-2.41.238-2.978.941-.646.803.788 1.316.909 1.783.049.19-.5.666-.903.694-1.393.097-1.835-.796-2.548-.76-1.211.062-3.591 2.152-3.867 2.171-1.034.072-.383-1.244-.47-2.49-.087-1.245-.603-.874-2.052-1.506-1.606-.701-3.225-.59-3.142-.691 1.018-1.254 5.593-.63 6.063-1.937z" fill="#090"/><path d="M28.708 51.911c-.587-.764-1.05-.944-2.21-1.427-.925-.386-2.238-.673-2.367-1.071-.144-.441 1.343-.924 1.852-.722.788.314 3.718.565 4.638.266.96-.312.32-3.192.657-3.512.338-.32 2.23-.87 2.428-.79.305.125-.534 1.79-.113 2.945.072.196.793-2.174 2.338-2.798.518-.209 1.468.3 1.468.3s-1.276 1.48-1.536 2.152c-.684 1.77-.689 3.833-.304 5.14.706 2.4 6.038 11.478 5.015 12.135-1.023.657-6.531 2.404-7.025 2.283-.493-.122-1.458-1.528-1.942-4.51-.484-2.98-.002-6.623-2.899-10.39z" fill="#75c267"/><ellipse cx="57.608" cy="35.249" rx="26.795" ry="23.945" fill="#479843" transform="rotate(-36.999 66.07 -2.209) scale(.19644)"/><ellipse cx="31.162" cy="64.171" rx="23.945" ry="19.954" fill="#325631" transform="rotate(-40.999 55.99 6.068) scale(.19644)"/><ellipse cx="38.05" cy="52.486" rx="23.945" ry="21.664" fill="#208b1b" transform="rotate(-36.999 62.228 1.178) scale(.19644)"/><path d="M35.582 41.048c2.55-.495 4.255-2.761 3.808-5.06-.447-2.3-2.151-3.588-5.427-3.266-3.276.322-4.255 2.761-3.808 5.06.447 2.3 2.877 3.762 5.427 3.266z" fill="#458742"/><path d="M27.066 50.871c.212-.466-1.11-.531-.926-1.172.09-.317.123-.663.702-.633.596.03 1.744.436 2.114.14 1.91-1.533.943-4.189-.237-5.755-1.526-2.025-4.575-3.287-7.193-1.314-2.618 1.973-3.737 5.612-1.495 7.662 2.241 2.05 5.706 3.993 7.035 1.072z" fill="#077202"/><path d="M31.636 46.061c.287-.234 1.336-.911 1.82-.59 1.186.785 1.24-1.297 1.557-1.973.86-1.836 1.56-3.496.78-5.247-1.157-2.6-5.29-3.453-8.137-2.185-2.848 1.268-3.333 4.178-2.175 6.777.588 1.32.827 3.19 2.947 3.381 2.12.191 2.266.605 3.208-.163z" fill="#198118"/><path d="M38.34 45.784c2.578.317 4.529-1.906 4.702-4.656.173-2.749-1.964-5.196-3.94-5.314-1.976-.119-5.269.363-5.55 3.952-.139 1.768-.322 3.862.63 4.747.351.327.65.63 1.172.802.183.06.87-.38 1.094-.356.926.101 1.216.742 1.892.825z" fill="#30792c"/><path d="M70.245 36.928c-.86-.909-1.134-2.251.311-.827 1.446 1.424.984 5.121 1.906 5.972.923.85.736 3.52-.438 1.46-1.175-2.059-.92-5.695-1.78-6.604z" fill="#1ba11b"/><path d="M73.685 36.235c.644-1.023.242-2.273-.395-.926s-1.719 7.262-.867 7.322c.852.06 1.243.098 1.295-.65.053-.749-.677-4.722-.033-5.746z" fill="#124f12"/><path d="M77.021 28.253c-.224-1.935-1.135-1.569-.64.209.494 1.777-1.705 4.959-2.684 9.632-.653 3.116-1.39 7.141-2.211 12.078l3.384-.108c-.842-3.295-.939-7.11-.29-11.445.971-6.503 2.666-8.43 2.441-10.366z" fill="#319d31"/><path d="M72.715 29.596c.317-1.804.707.148.31 1.011-.397.864-.632 4.226-.287 8.616.23 2.927.09 6.596-.424 11.007l-2.49-.99c1.177-2.565 1.734-5.867 1.672-9.904-.094-6.058.903-7.937 1.22-9.74z" fill="#0d700d"/><path d="M80.518 30.477c.154-2.197-.212-1.415-.56-.04-.349 1.377-3.74 2.288-4.729 7.096-.329 1.6-1.057 2.396-1.195 5.21-.139 2.815-.872 5.498-.452 7.301.28 1.202.972 1.097 2.077-.316-.53-3.125-.467-6.916.19-11.376.641-4.36 4.555-6.253 4.669-7.875z" fill="#1b5d1b"/><path d="M67.708 53.747c.63-.53 2.04-4.204 2.098-5.018.016-.243.422.245.595.349.477.286 1.128 1.157 2.046-.134.151-.212.314.769.68.691.501-.106.84-1.132 1.355-.822.517.31 1.273.206 1.243.637-.066.932.09 2.562.469 4.89 5.03 7.872 6.062 13.952 3.096 18.242-2.1 3.037-4.155 3.242-5.446 3.759-.106.042-.362-.188-.435.85-.073 1.036.04.835-.06.856-.08.017-.279-.388-.311-.883-.025-.385.12-.89.06-.875-.03.007-.887.23-.577.567.31.338.09 1.144-.078 1.127-.16-.015.288-.28-.525-1.169-.814-.888-.525-.502-.666-.363-.133.132-.065.409-.055.789.005.186.183.813-.045.653-.249-.174-.357-.431-.409-.685-.094-.456-.004-.898-.216-.807-1.188.505-1.123 1.581-1.223 1.363-.24-.525.542-1.448.431-1.418-.397.107-.821.03-1.276.498-.129.134-.488.337-.654.49-.468.435-.342.101.038-.533.227-.38 1.01-.788.953-.813-.849-.37-4.108.66-6.785-4.667-2.677-5.326 2.721-15.071 5.697-17.574z" fill="#c47106"/><path d="M73.497 55.281c-.183-.735-.264 1.659.93 3.423 1.882 2.786 4.082 4.425 4.377 8.633.275 3.944-1.163 7.084-2.037 7.2-.51.07.437.383.75-.019.281-.361 2.025-1.93 1.656-7.207-.314-4.484-3.904-7.705-4.478-8.626-.785-1.256-1.198-3.404-1.198-3.404zm-1.56-.402c.174-.69.239 2.718-.863 4.999-1.807 3.744-2.227 5.317-2.517 6.852-.423 2.239-.098 4.735.976 7.49l-.446.015s-1.804-3.144-.908-7.531c.926-4.537 1.971-5.574 2.522-6.852 1.06-2.456 1.235-4.973 1.235-4.973z" fill="#e3b231"/><path d="M71.829 54.367c-.121-.677.148 3.845.854 6.1 1.158 3.699 1.446 5.244 1.657 6.75.356 2.53.088 5.844-.184 6.555-.275.717-.383.53-.275.717.097.166.433-.728.433-.728s.89-2.258.247-6.56c-.666-4.448-1.305-5.488-1.661-6.75-.686-2.423-1.071-6.084-1.071-6.084zm-2.166.489c.215-.727.426.328-1.59 3.233-2.016 2.906-3.318 4.443-3.61 8.619-.274 3.915 1.578 7.06 2.67 7.192.64.077-.538.372-.935-.033-.358-.364-2.562-1.955-2.196-7.191.311-4.45 2.998-7.708 3.699-8.613.956-1.235 1.962-3.207 1.962-3.207z" fill="#e3b231"/><path d="M13.065 61.09c.067-.172 1.3-1.812 1.136-2.105-.123-.221-1.296-.042-1.286-.222.045-.773.908-1.733.725-2.403-.345-1.259-1.38-1.308-2.196-2.323-.334-.415-1.719-2.161-1.898-1.693 0 0 .817 1.12 1.457 2.398.136.27 1.045.882 1.155 1.157.437 1.093.077 1.904-.633 2.055-.71.15-1.45-1.32-2.437-2.142-.641-.533-.814-.665-1.355-1.157-.53-.481-.903-.548-1.156-.73-.097-.069-.25-1.522-.522-2.137-.266-.603-.148 1.987-.142 2.026.094.645 3.203 3.367 2.85 3.784-.05.06-.816-.22-2.526-1.43-1.71-1.212-2.83-1.526-3.951-1.948-.483-.182-1.27.538-1.283.572-.074.193 1.186-.058 1.946.308.594.286.901.65 1.58 1.024 1.158.638 1.134.86 2.06 1.57.621.477 1.628.869 2.29 1.271.477.29.697.864.79 1.047.077.153-1.05-.178-2.36-.198-.85-.013-1.137.549-1.708.686-.306.073-1.224-.133-2.129-.038-.56.059-2.457-.515-2.339-.449.517.29 1.482 1.284 2.612 1.367 1.834.133 3.099-.04 3.806-.173.708-.133 2.114.715.924 1.226-.442.189-1.604.683-2.531 1.309-.57.386-1.13.956-1.144 1.137-.007.093.793-.352 1.206-.5.921-.327 2.27-.999 2.608-1.184 1.738-.951 2.222-1.285 3.156-2.378.366-.429 1.098.787 1.295.273z" fill="#090"/><path d="M55.777 76.733c1.344-3.482-31.403-19.228-34.884-20.557-3.481-1.33-6.21.867-7.553 4.35-1.344 3.482-.794 6.931 2.688 8.26 3.48 1.33 38.405 11.43 39.749 7.947h0z" fill="#e66835" stroke="#e66835" stroke-width=".295"/><path d="M22.494 65.121c-2.5 5.416-3.353 4.674-3.353 4.674m9.969-9.78c.21.59-.41 2.18-1.866 4.766m.324 7.413c.75-.052 1.664-1.428 2.741-4.127m7.529-3.611c.172.56-.33 1.823-1.507 3.785m15.203 4.152c.116.298-.15.989-.795 2.072m1.11 2.927c.236-.093.525-.585.87-1.473m-14.882-1.096c.59.117 1.33-.95 2.218-3.203m5.257-3.078c.278.277-.189 1.316-1.4 3.116m1.454 4.789c.291-.074.797-.748 1.516-2.02" fill="none" stroke="#952d03" stroke-width=".295" stroke-linecap="round"/></svg>

package/src/codegenerator/shapes/frame.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en" style="overflow: hidden">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/assets/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Garden Component Library by Rabbit Development</title>
+  </head>
+  <body
+    style="
+      margin: 0;
+      height: 100%;
+      width: 100%;
+      top: 0px;
+      position: absolute;
+      overflow: auto;
+    "
+  >
+    <div id="app"></div>
+    <script type="module" src="/gardenframe/gardenframe.js"></script>
+  </body>
+</html>

package/src/codegenerator/shapes/gardenframe/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en" style="overflow: hidden">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/assets/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Garden Component Library by Rabbit Development</title>
+  </head>
+  <body
+    style="
+      margin: 0;
+      height: 100%;
+      width: 100%;
+      top: 0px;
+      position: absolute;
+      overflow: auto;
+    "
+  >
+    <div id="app"></div>
+    <script type="module" src="/gardenframe/gardenframe.js"></script>
+  </body>
+</html>

package/src/codegenerator/shapes/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/assets/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Garden UI Component Explorer</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/lib/gardenapp.js"></script>
+  </body>
+</html>

package/src/codegenerator/shapes/lib/gardenapp.js

@@ -0,0 +1,12 @@
+import { GardenApp } from 'garden'
+import { navTree, routes } from '../base.js'
+import { dasMap } from '../das_import_map.js'
+import config from '../../garden.config.js'
+import 'garden/main.scss'
+
+const app = new GardenApp({
+  target: document.getElementById('app'),
+  props: { navTree, routes, dasMap, config },
+})
+
+export default app

package/src/codegenerator/shapes/screenshottests/disable_animations.css

@@ -0,0 +1,12 @@
+* {
+  -o-transform: none !important;
+  -moz-transform: none !important;
+  -ms-transform: none !important;
+  -webkit-transform: none !important;
+  transform: none !important;
+  -webkit-animation: none !important;
+  -moz-animation: none !important;
+  -o-animation: none !important;
+  -ms-animation: none !important;
+  animation: none !important;
+}

package/src/codegenerator/shapes/screenshottests/screenshottest.base.js

@@ -0,0 +1,48 @@
+import puppeteer from 'puppeteer'
+import { routes } from '../garden/base'
+import { dasmap } from '../garden/importmap'
+import { toMatchImageSnapshot } from 'jest-image-snapshot'
+
+expect.extend({ toMatchImageSnapshot })
+
+describe('Component Screenshot Test', () => {
+  let browser
+  let page
+  beforeAll(async () => {
+    browser = await puppeteer.launch({ headless: true })
+
+    const url = 'http://localhost:3010/.garden/gardenframe/'
+    page = await browser.newPage()
+    await page.goto(url, { waitUntil: 'networkidle0', timeout: 60000 })
+    await page.setViewport({ width: 600, height: 800 })
+    await page.addStyleTag({
+      path: 'garden/screenshottests/disable_animations.css',
+    })
+  })
+  afterAll(async () => {
+    await page.close()
+    await browser.close()
+  })
+
+  for (const [route, { name, fullname: componentName }] of Object.entries(
+    routes
+  )) {
+    const das = dasmap[componentName]
+    describe(`Component ${name} at route: ${route}`, () => {
+      for (const example of das.examples) {
+        const story = example.story
+        it(story, async () => {
+          await page.evaluate(
+            (data) => {
+              window.postMessage(data, '*')
+            },
+            { selectedStory: story, componentName }
+          )
+          const body = await page.$('body')
+          const screenshot = await body.screenshot()
+          expect(screenshot).toMatchImageSnapshot()
+        })
+      }
+    })
+  }
+})

package/src/codegenerator/watch.js

@@ -0,0 +1,36 @@
+import fswatch from 'node-watch'
+
+export function watch(directories, options = {}, onChange) {
+  directories.forEach((dir) => doWatch(dir, options, onChange))
+}
+
+let waitForUpdate = false
+
+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)
+    }
+  })
+}
+
+function watchFileType(filename, options) {
+  let watchFile = true
+  if (options.include) {
+    watchFile &= options.include.some((pattern) =>
+      filename.match(pattern + '$')
+    )
+  }
+  if (options.exclude) {
+    watchFile &= !options.exclude.some((pattern) => filename.match(pattern))
+  }
+  if (watchFile) {
+    console.log('watch file changed:', filename)
+  }
+  return watchFile
+}

package/src/codegenerator/watchcl.js

@@ -0,0 +1,34 @@
+import { getConfig } from '../config.js'
+import { watch } from './watch.js'
+import { generateGardenBase } from './base_generator.js'
+import { clearBaseFolder, copyBaseClasses } from './copy_base_classes.js'
+
+export async function init() {
+  const { watch: watchconfig, serverport } = await getConfig()
+  const { directories, include } = watchconfig
+  await clearBaseFolder()
+  await copyBaseClasses()
+  await generate(serverport)
+  watch(directories, { include: include }, async () => {
+    await generate()
+  })
+}
+
+async function generate(serverport) {
+  console.clear()
+  console.log('PROJECT ROOT: ', process.cwd())
+  console.log('')
+  console.log('generate garden app')
+  console.log('======================')
+  console.log('')
+  await generateGardenBase()
+  console.log('')
+  console.log('======================')
+  console.log('')
+  console.log('generate garden app finished')
+  console.log('')
+  console.log(`Listen at -> http://localhost:${serverport}`)
+  console.log('')
+  console.log('======================')
+  console.log('')
+}

package/src/config.js

@@ -0,0 +1,19 @@
+import fs from 'fs'
+import path from 'path'
+
+let config
+export async function getConfig() {
+  if (!config) {
+    config = await readConfig()
+  }
+  return config
+}
+
+async function readConfig() {
+  if (fs.existsSync(path.resolve('garden.config.js'))) {
+    console.log('the path is', path.resolve('garden.config.js'))
+    const config = await import(path.resolve('garden.config.js'))
+    return config.default
+  }
+  return { garden: {} }
+}

package/src/renderer/SvelteRenderer.js

@@ -0,0 +1,16 @@
+async function create() {
+  try {
+    const { default: SvelteApp } = await import('./SvelteRenderer.svelte')
+    const app = new SvelteApp({
+      target: document.getElementById('app'),
+    })
+    return {
+      destroy: () => app.$destroy(),
+      updateComponent: (props) => app.$set(props),
+    }
+  } catch (e) {
+    console.log('DEBUG', 'error', e)
+  }
+}
+
+export default { create }

package/src/renderer/SvelteRenderer.svelte

@@ -0,0 +1,79 @@
+<script>
+  import { onDestroy, onMount, beforeUpdate, afterUpdate } from 'svelte'
+  export let componentMap
+  export let componentName
+  export let selectedExample
+  export let das
+
+  let unmountFn
+
+  $: component = componentMap?.[componentName] || componentMap?.Welcome
+
+  let redirectData = {}
+  $: {
+    if (selectedExample) {
+      redirectData = {}
+    }
+  }
+
+  $: {
+    updateState(das, selectedExample)
+  }
+
+  async function updateState(das, selectedExample) {
+    console.log('DEBUG', 'update state')
+    if (unmountFn) {
+      console.log('DEBUG', 'call unmount update state')
+      unmountFn()
+      unmountFn = undefined
+    }
+    if (das?.beforeEach) {
+      unmountFn = await das.beforeEach()
+    }
+  }
+
+  onDestroy(() => {
+    console.log('DEBUG', 'on destroy')
+    if (unmountFn) {
+      console.log('DEBUG', 'call unmount on destroy')
+      unmountFn()
+      unmountFn = undefined
+    }
+  })
+  onMount(() => {
+    console.log('DEBUG', 'on mount')
+  })
+  beforeUpdate(() => {
+    console.log('DEBUG', 'before update')
+    if (unmountFn) {
+      console.log('DEBUG', 'call unmount before update')
+      unmountFn()
+    }
+    unmountFn = undefined
+  })
+
+  afterUpdate(() => {
+    console.log('DEBUG', 'after update')
+  })
+
+  function handleComponentOut(evt) {
+    if (das.out) {
+      das.out.forEach((out) => {
+        if (evt.detail[out.name]) {
+          console.log(evt.detail[out.name])
+          if (selectedExample.redirect && selectedExample.redirect[out.name]) {
+            const input = selectedExample.redirect[out.name]
+            redirectData[input] = evt.detail[out.name]
+          }
+        }
+      })
+    }
+  }
+</script>
+
+<svelte:component
+  this={component}
+  {...selectedExample?.input}
+  {...redirectData}
+  on:out={handleComponentOut}
+/>

package/src/renderer/VueRenderer.js

@@ -0,0 +1,20 @@
+//import { updateVueState } from './state.js'
+//import { createApp } from 'vue'
+// import VueApp from './VueRenderer.js'
+
+async function create() {
+  try {
+    const { createApp } = await import('vue')
+    const { updateVueState } = await import('./state.js')
+    const { default: VueApp } = await import('./VueRenderer.vue')
+    updateVueState({})
+    const app = createApp(VueApp)
+    app.mount('#app')
+    return {
+      destroy: () => app.unmount(),
+      updateComponent: updateVueState,
+    }
+  } catch (e) {}
+}
+
+export default { create }

package/src/renderer/VueRenderer.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { componentMap } from '/component_import_map.js'
+import { ref, watch } from 'vue'
+import { state } from './state.js'
+
+const component = ref()
+
+watch(state, (newState) => {
+  component.value = componentMap[newState.componentName]
+})
+</script>
+
+<template>
+  <component
+    v-if="component"
+    :is="component"
+    v-bind="{ ...state.selectedExample.input }"
+  />
+  <h1 v-else>Ups</h1>
+</template>

package/src/renderer/state.js

@@ -0,0 +1,10 @@
+import { reactive } from 'vue'
+
+export const state = reactive({ selectedExample: 'FOO' })
+
+export function updateVueState({ selectedExample, das, componentName }) {
+  console.log('DEBUG', 'update vue state', das, componentName)
+  state.selectedExample = selectedExample
+  state.das = das
+  state.componentName = componentName
+}

package/src/server.js

@@ -0,0 +1,26 @@
+import { getConfig } from './config.js'
+import open from 'open'
+import { createServer as createViteServer } from 'vite'
+
+export async function createServer() {
+  const { serverport, vite_config, devmodus, no_open_browser } =
+    await getConfig()
+
+  const configFile = vite_config || './vite.config.js'
+
+  const server = await createViteServer({
+    configFile,
+    root: '.garden/',
+    assetsInclude: ['**/*.md'],
+    server: {
+      port: serverport,
+    },
+  })
+  server.listen()
+
+  if (devmodus) {
+    console.log('!!!!RUNNING IN DEVELOPMENT-MODUS!!!!')
+  }
+
+  if (!no_open_browser) open(`http://localhost:${serverport}`)
+}

package/svelte.config.js

@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+  compilerOptions: { hydratable: true },
+}

package/vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+  build: {
+    rollupOptions: {
+      input: ['index.html', 'frame.html'],
+      makeAbsoluteExternalsRelative: false,
+      external: [
+        'garden',
+        '/raw_component_import_map.js',
+        '../base.js',
+        '../das_import_map.js',
+        '../component_import_map.js',
+        '../../garden.config.js',
+        '../Hellogarden.svelte',
+        '/renderer/SvelteRenderer.svelte',
+        '/renderer/VueRenderer.vue',
+        '/renderer/state.js',
+        'vue',
+      ],
+    },
+  },
+})