@lightningjs/blits 1.5.1 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## v1.7.0
+
+_14 oct 2024_
+
+- Added cleanup upon component destroy of effects generated by global reactivity
+
+## v1.6.0 / v1.6.1
+
+_9 oct 2024_
+
+- Abstracted app create functionality to separate package
+- Cleaned up dependencies
+- Fixed issue with item reference in for loop
+- Fixed issue with looping directly over `<Text>` components
 
 ## v1.5.1
 

package/bin/index.js

@@ -1,141 +1,9 @@
 #!/usr/bin/env node
-import path from 'path'
-import process from 'process'
-import { dirname } from 'path'
-import prompts from 'prompts'
-import { fileURLToPath } from 'url'
-import fs from 'fs'
-import { red, bold } from 'kolorist'
-import sequence from '../src/helpers/sequence.js'
-import validatePackage from 'validate-npm-package-name'
-import {
-  addESlint,
-  copyLightningFixtures,
-  setAppData,
-  setBlitsVersion,
-  gitInit,
-  done, spinnerMsg
-} from './helpers.js'
+import { execSync } from 'child_process'
 
-const defaultBanner = `
---------------------------------------------------------------------
- Welcome to Blits - The App development framework for Lightning 3 ⚡️
---------------------------------------------------------------------
-
-Answer the questions below to set up a new Lightning 3 Blits App
-`
-
-console.log(defaultBanner)
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
-
-const fixturesBase = path.join(
-  __dirname,
-  '../boilerplate')
-
-const questions = [
-  {
-    type: 'text',
-    name: 'appName',
-    message: 'What is the name of your App?',
-    format: val => {
-      // Check if the provided application name is empty
-      if (!val.trim()) {
-        spinnerMsg.fail(red(bold("Please provide a name for the App")))
-        return process.exit(1)
-      } else {
-        return val
-      }
-    },
-    initial: 'My Blits App', // Default value for the application name
-  },
-  {
-    type: 'text',
-    name: 'appPackage',
-    message: 'What is the package name of your App?',
-    format: val => {
-      // Validate the package name using validate-npm-package-name
-      if (!validatePackage(val).validForNewPackages) {
-        spinnerMsg.fail(red(bold("Please provide a valid package name")))
-        return process.exit(1)
-      } else {
-        return val
-      }
-    },
-    initial: prev => `${prev.replace(/[\sA-Z]/g, str => str === ' ' ? '-' : str.toLowerCase())}`,
-  },
-  {
-    type: 'text',
-    name: 'appFolder',
-    message: 'In what folder (relative to the current location) should the App be generated?',
-    format: (val, prev) => {
-      // Regular expression to validate whether the path is Unix/Windows-based
-      const pathRegex = /([A-Za-z]:)?([\\/]+\w+)+/
-      // Check if the provided path matches the defined regex
-      if (pathRegex.test(val)) {
-        try {
-          // Check if the path exists
-          if (fs.statSync(val)) {
-            // Return the resolved file path using path.join
-            return `${path.join(val, prev.appPackage)}`
-          }
-        } catch (e) {
-          // Handle case where an error occurred during file system interaction
-          if (e.code === 'ENOENT') {
-            spinnerMsg.fail(red(bold("Entered directory path is invalid, please enter a valid directory!")))
-            process.exit()
-          }
-        }
-      } else if (val === prev.appPackage) {
-        return path.join(process.cwd(), prev.appPackage)
-      }
-    },
-    initial: (prev, val) => val.appPackage,
-  },
-  {
-    type: 'toggle',
-    name: 'esLint',
-    message: 'Do you want to enable eslint?',
-    initial: 'true',
-    active: 'Yes',
-    inactive: 'No',
-  },
-  {
-    type: 'toggle',
-    name: 'gitInit',
-    message: 'Do you want to generate an git repository?',
-    initial: 'true',
-    active: 'Yes',
-    inactive: 'No',
-  },
-]
-
-
-const createApp = () => {
-  return new Promise(resolve => {
-    let config
-    sequence([
-      async () => {
-        const onCancel = () => {
-          process.exit()
-        }
-        config = await prompts(questions, { onCancel })
-        config.fixturesBase = fixturesBase
-        return config
-      },
-      () => {
-        spinnerMsg.start(`Generating new App "${config.appName}" ...`)
-        copyLightningFixtures(config).then(targetDir => (config.targetDir = targetDir))
-        spinnerMsg.succeed()
-      },
-      () => setAppData(config),
-      () => setBlitsVersion(config),
-      () => config.esLint && addESlint(config),
-      () => config.gitInit && gitInit(config.targetDir, config.fixturesBase),
-      () => done(config)
-    ])
-  })
+try {
+  execSync('npx --yes @lightningjs/create-blits@latest', { stdio: 'inherit' })
+} catch (error) {
+  console.error('Error while creating new Lightning 3 Blits App', error)
+  process.exit(1)
 }
-
-createApp()

package/docs/getting_started/getting_started.md

@@ -9,7 +9,7 @@ To get started with Blits, follow these simple steps to set up your development
 2. Run the following command to start a new Blits Lightning 3 App project:
 
 ```bash
-npx @lightningjs/blits@latest
+npm create @lightningjs/app
 ```
 
  You will be guided through a short series of questions to generate a new project with all the boilerplate code you need to start building your own Lightning 3 App.

package/docs/plugins/language.md

@@ -121,7 +121,7 @@ Blits.Component('MyComponent', {
 
 ## Getting the current language
 
-The current language can be retrieved via the `this.$languagelanguage` property. It will return the currently set language code.
+The current language can be retrieved via the `this.$language.language` property. It will return the currently set language code.
 
 ## Translating
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -48,13 +48,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.0.2",
-    "@lightningjs/renderer": "^2.3.0",
-    "execa": "^8.0.1",
-    "kolorist": "^1.8.0",
-    "ora": "^7.0.1",
-    "prompts": "^2.4.2",
-    "replace-in-file": "^6.1.0",
-    "validate-npm-package-name": "^5.0.0"
+    "@lightningjs/renderer": "^2.3.2"
   },
   "repository": {
     "type": "git",

package/src/component/base/methods.js

@@ -20,6 +20,7 @@ import Focus from '../../focus.js'
 import eventListeners from '../../lib/eventListeners.js'
 import { trigger } from '../../lib/reactivity/effect.js'
 import { Log } from '../../lib/log.js'
+import { removeGlobalEffects } from '../../lib/reactivity/effect.js'
 
 export default {
   focus: {
@@ -56,6 +57,7 @@ export default {
       this.$clearIntervals()
       eventListeners.removeListeners(this)
       deleteChildren(this[symbols.children])
+      removeGlobalEffects(this[symbols.effects])
       Log.debug(`Destroyed component ${this.componentId}`)
     },
     writable: false,

package/src/component/setup/index.js

@@ -32,6 +32,8 @@ let counter = 0
 export default function (component, config) {
   component[symbols.identifier] = ++counter
 
+  component[symbols.effects] = []
+
   // setup hooks
   registerHooks(config.hooks, component[symbols.identifier])
 

package/src/component.js

@@ -161,9 +161,12 @@ const Component = (name = required('name'), config = required('config')) => {
     // reactive bindings define in the template
     const effects = config.code.effects
     for (let i = 0; i < effects.length; i++) {
-      effect(() => {
+      const eff = () => {
         effects[i](this, this[symbols.children], config, globalComponents, rootComponent, effect)
-      })
+      }
+      // store reference to the effect
+      this[symbols.effects].push(eff)
+      effect(eff)
     }
 
     // setup watchers if the components has watchers specified

package/src/lib/codegenerator/generator.js

@@ -356,6 +356,9 @@ const generateForLoopCode = function (templateObject, parent) {
     templateObject[Symbol.for('componentType')] === 'Slot' ||
     templateObject[Symbol.for('componentType')] === 'Text'
   ) {
+    if (templateObject[Symbol.for('componentType')] === 'Text') {
+      templateObject.__textnode = 'true'
+    }
     generateElementCode.call(ctx, templateObject, parent, {
       key: 'scope.key',
       component: 'scope.',
@@ -389,13 +392,15 @@ const generateForLoopCode = function (templateObject, parent) {
   }
 
   // inner scope variables are part of the main forloop
-  innerScopeEffects.forEach((effect) => {
+  innerScopeEffects.forEach((effect, index) => {
     const key = effect.indexOf(`scope.${index}`) > -1 ? `'${interpolate(result[2], '')}'` : null
     if (effect.indexOf("Symbol.for('props')") === -1) {
       ctx.renderCode.push(`
-        effect(() => {
+        let eff${index} = () => {
           ${effect}
-        }, ${key})
+        }
+        effect(eff${index}, ${key})
+        component[Symbol.for('effects')].push(eff${index})
       `)
     } else {
       // props shouldn't be wrapped in an effect, but simply passed on
@@ -450,8 +455,11 @@ const generateForLoopCode = function (templateObject, parent) {
       const match = matches[l]
       const ref = `component.${match[2]}`
       refs.indexOf(ref) === -1 && refs.push(ref)
-      effect =
-        effect.substring(0, match.index) + ref + effect.substring(match.index + match[1].length)
+      // don't update the effect to point to component, if we're referring to a scope item
+      if (match[2] !== item) {
+        effect =
+          effect.substring(0, match.index) + ref + effect.substring(match.index + match[1].length)
+      }
     }
 
     ctx.renderCode.push(`

package/src/lib/reactivity/effect.js

@@ -29,8 +29,22 @@ export const resumeTracking = () => {
 }
 
 const objectMap = new WeakMap()
+const globalEffectsMap = new Map()
 
-export const track = (target, key) => {
+export const removeGlobalEffects = (effectsToRemove) => {
+  if (globalEffectsMap.size === 0) return
+  for (const [effect, target] of globalEffectsMap) {
+    if (effectsToRemove.indexOf(effect) === -1) continue
+    const effectsSet = objectMap.get(target)
+    if (effectsSet === undefined) continue
+    for (const set of effectsSet.values()) {
+      set.delete(effect)
+      globalEffectsMap.delete(effect)
+    }
+  }
+}
+
+export const track = (target, key, global = false) => {
   if (currentEffect) {
     if (paused) {
       return
@@ -49,6 +63,8 @@ export const track = (target, key) => {
       effectsMap.set(key, effects)
     }
     effects.add(currentEffect)
+
+    if (global === true) globalEffectsMap.set(currentEffect, target)
   }
 }
 

package/src/lib/reactivity/reactive.js

@@ -28,7 +28,7 @@ export const getRaw = (value) => {
   return raw ? getRaw(raw) : value
 }
 
-const reactiveProxy = (original, _parent = null, _key) => {
+const reactiveProxy = (original, _parent = null, _key, global) => {
   // don't create a proxy when a Blits component or an Image Texture
   // is assigned to a state variable
   if (typeof original === 'object') {
@@ -53,7 +53,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
       if (Array.isArray(target)) {
         if (typeof target[key] === 'object' && target[key] !== null) {
           if (Array.isArray(target[key])) {
-            track(target, key)
+            track(target, key, global)
           }
           // create a new reactive proxy
           return reactiveProxy(getRaw(target[key]), target, key)
@@ -81,7 +81,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
       // handling objects (but not null values, which have object type in JS)
       if (typeof target[key] === 'object' && target[key] !== null) {
         if (Array.isArray(target[key])) {
-          track(target, key)
+          track(target, key, global)
         }
         // create a new reactive proxy
         return reactiveProxy(getRaw(target[key]), target, key)
@@ -89,7 +89,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
 
       // handling all other types
       // track the key on the target
-      track(target, key)
+      track(target, key, global)
       // return the reflected value
       return Reflect.get(target, key, receiver)
     },
@@ -119,7 +119,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
   return proxy
 }
 
-const reactiveDefineProperty = (target) => {
+const reactiveDefineProperty = (target, global) => {
   Object.keys(target).forEach((key) => {
     let internalValue = target[key]
 
@@ -140,7 +140,7 @@ const reactiveDefineProperty = (target) => {
       enumerable: true,
       configurable: true,
       get() {
-        track(target, key)
+        track(target, key, global)
         return internalValue
       },
       set(newValue) {
@@ -157,8 +157,10 @@ const reactiveDefineProperty = (target) => {
   return target
 }
 
-export const reactive = (target, mode = 'Proxy') => {
-  return mode === 'defineProperty' ? reactiveDefineProperty(target) : reactiveProxy(target)
+export const reactive = (target, mode = 'Proxy', global = false) => {
+  return mode === 'defineProperty'
+    ? reactiveDefineProperty(target, global)
+    : reactiveProxy(target, undefined, undefined, global)
 }
 
 export const memo = (raw) => {

package/src/lib/symbols.js

@@ -46,4 +46,6 @@ export default {
   componentType: Symbol.for('componentType'),
   // Symbol 'isComponent' utilized within generated code
   isComponent: Symbol.for('isComponent'),
+  // Symbol 'effects' utilized within generated code
+  effects: Symbol.for('effects'),
 }

package/src/plugin.js

@@ -1,4 +1,4 @@
-import log from './plugins/log'
+import log from './plugins/log.js'
 
 export const plugins = {
   // log plugin added by default

package/src/plugins/appstate.js

@@ -21,6 +21,6 @@ import Settings from '../settings.js'
 export default {
   name: 'appState',
   plugin(state = {}) {
-    return reactive(state, Settings.get('reactivityMode'))
+    return reactive(state, Settings.get('reactivityMode'), true)
   },
 }

package/src/plugins/language.js

@@ -32,7 +32,8 @@ export default {
         language: '',
         loaded: 0,
       },
-      Settings.get('reactivityMode')
+      Settings.get('reactivityMode'),
+      true
     )
 
     const setLanguage = (language) => {

package/src/plugins/log.js

@@ -15,7 +15,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { default as log } from '../lib/log'
+import { default as log } from '../lib/log.js'
 
 export default {
   name: 'log',

package/src/plugins/theme.js

@@ -15,7 +15,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Log } from '../lib/log'
+import { Log } from '../lib/log.js'
 import { reactive } from '../lib/reactivity/reactive.js'
 
 import Settings from '../settings.js'
@@ -52,7 +52,8 @@ export default {
       {
         current: 'default',
       },
-      Settings.get('reactivityMode')
+      Settings.get('reactivityMode'),
+      true
     )
 
     let themes = {}

package/bin/helpers.js

@@ -1,220 +0,0 @@
-import { green, bold, red } from 'kolorist'
-import path from 'path'
-import { execa } from 'execa'
-import fs from 'fs'
-import replaceInFile from 'replace-in-file'
-import ora from 'ora'
-const spinner = ora()
-
-/**
- * This function copies Lightning fixtures to the target directory for creating a L3 application.
- */
-
-export const copyLightningFixtures = (config) => {
-  return new Promise((resolve) => {
-    const targetDir = config.appFolder || ''
-    if (config.appFolder && fs.existsSync(targetDir)) {
-      exit(red(bold('The target directory ' + targetDir + ' already exists')))
-    }
-    //this will be removed once ts support is added
-    fs.cpSync(path.join(path.join(config.fixturesBase, 'js'), 'default'), targetDir, {
-      recursive: true,
-    })
-    fs.cpSync(path.join(config.fixturesBase, 'common/public'), path.join(targetDir, 'public'), {
-      recursive: true,
-    })
-
-    resolve(targetDir)
-  })
-}
-
-/**
- * This function adds eslint related configuration to the project folder to be created
- * @param config
- * @returns {boolean}
- */
-export const addESlint = (config) => {
-  // Make husky dir
-  fs.mkdirSync(path.join(config.targetDir, '.husky'), { recursive: true })
-
-  // Copy husky hook
-  fs.copyFileSync(
-    path.join(config.fixturesBase, 'common/eslint/husky/pre-commit'),
-    path.join(config.targetDir, '.husky/pre-commit')
-  )
-
-  // Copy editor config from common
-  fs.copyFileSync(
-    path.join(config.fixturesBase, 'common/eslint/.editorconfig'),
-    path.join(config.targetDir, '.editorconfig')
-  )
-
-  // Copy eslintignore from common
-  fs.copyFileSync(
-    path.join(config.fixturesBase, 'common/eslint/.eslintignore'),
-    path.join(config.targetDir, '.eslintignore')
-  )
-
-  // Copy eslintrc.js from fixtured specfic directory
-  fs.copyFileSync(
-    path.join(config.fixturesBase, 'common/eslint/.eslintrc.cjs'),
-    path.join(config.targetDir, '.eslintrc.cjs')
-  )
-
-  // Copy IDE stuff from fixture base
-  fs.cpSync(path.join(config.fixturesBase, 'common/ide'), path.join(config.targetDir), {
-    recursive: true,
-  })
-
-  // Copy and merge fixture specific package.json
-  const origPackageJson = JSON.parse(fs.readFileSync(path.join(config.targetDir, 'package.json')))
-  const eslintPackageJson = JSON.parse(
-    fs.readFileSync(path.join(config.fixturesBase, 'common/eslint/package.json'))
-  )
-  fs.writeFileSync(
-    path.join(config.targetDir, 'package.json'),
-    JSON.stringify(
-      {
-        ...origPackageJson,
-        ...eslintPackageJson,
-        devDependencies: {
-          ...(origPackageJson.devDependencies || {}),
-          ...(eslintPackageJson.devDependencies || {}),
-        },
-      },
-      null,
-      2
-    )
-  )
-
-  return true
-}
-
-/**
- * This function sets the version by fetching the latest blits version
- * @param config
- * @returns {Promise<unknown>}
- */
-export const setBlitsVersion = (config) => {
-  return new Promise((resolve, reject) => {
-    execa('npm', ['view', '@lightningjs/blits', 'version'])
-      .then(({ stdout }) => {
-        replaceInFile.sync({
-          files: config.targetDir + '/*',
-          from: /\{\$blitsVersion\}/g,
-          to: '^' + stdout,
-        })
-        resolve()
-      })
-      .catch((e) => {
-        spinnerMsg.fail(`Error occurred while setting blits version\n\n${e}`)
-        reject()
-      })
-  })
-}
-
-/**
- * Display a message and start a spinner with the specified message.
- *
- * @param {string} msg - The message to display while starting the spinner.
- */
-export const spinnerMsg = {
-  start(msg) {
-    console.log(' ')
-    spinner.start(msg)
-  },
-  stop() {
-    spinner.stop()
-  },
-  succeed(msg) {
-    spinner.succeed(msg)
-  },
-  fail(msg) {
-    spinner.fail(msg)
-    console.log(' ')
-  },
-  warn(msg) {
-    spinner.warn(msg)
-  },
-}
-
-/**
- * This function replaces placeholders like '{$appName}' and '{$appPackage}' in files within the target directory
- * with the actual values from the configuration object.
- *
- * @param {Object} config - The configuration object containing application data.
- */
-export const setAppData = (config) => {
-  replaceInFile.sync({
-    files: config.targetDir + '/*',
-    from: /\{\$appPackage\}/g,
-    to: config.appPackage,
-  })
-
-  replaceInFile.sync({
-    files: config.targetDir + '/*',
-    from: /\{\$appName\}/g,
-    to: config.appName,
-  })
-}
-
-/**
- * Display an error message and exit the program with an error status.
- *
- * @param {string} msg - The error message to display before exiting the program.
- */
-export const exit = (msg) => {
-  spinnerMsg.fail(msg)
-  process.exit()
-}
-
-/**
- * Initialize an empty Git repository in the specified directory and copy a .gitignore file.
- *
- * @param {string} cwd - The current working directory where the Git repository will be created.
- * @param {string} fixturesBase - The base directory for fixtures.
- * @returns {Promise} A Promise that resolves when the Git initialization and file copying are completed successfully
- */
-export const gitInit = (cwd, fixturesBase) => {
-  spinnerMsg.start('Initializing empty GIT repository')
-  let msg
-  return execa('git', ['init'], { cwd })
-    .then(({ stdout }) => (msg = stdout))
-    .then(() => {
-      return fs.copyFileSync(
-        path.join(fixturesBase, 'common/git/gitignore'),
-        path.join(cwd, '.gitignore')
-      )
-    })
-    .then(() => spinnerMsg.succeed(msg))
-    .catch((e) => spinnerMsg.fail(`Error occurred while creating git repository\n\n${e}`))
-}
-
-/**
- * Checks whether the give path is valid
- * @param path
- * @returns {boolean}
- */
-export const isValidPath = (path) => {
-  try {
-    // Check if the path exists
-    fs.accessSync(path, fs.constants.F_OK)
-    return true
-  } catch (err) {
-    // The path does not exist or is not accessible
-    return false
-  }
-}
-
-export const done = (config) => {
-  console.log('')
-  console.log('--------------------------------------------------------------------')
-  console.log(' Your new boilerplate Lightning 3 App has been created! ⚡️')
-  console.log('--------------------------------------------------------------------')
-  console.log('')
-  console.log('Follow the steps below to get started:')
-  console.log('')
-  console.log(`    ${green(bold(`cd ${config.appFolder}`))}`)
-  console.log(`    ${green(bold('npm install'))}`)
-  console.log(`    ${green(bold('npm run dev'))}`)
-}

package/boilerplate/common/eslint/.editorconfig

@@ -1,7 +0,0 @@
-[*]
-charset = utf-8
-indent_size = 2
-indent_style = space
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true

package/boilerplate/common/eslint/.eslintignore

@@ -1,3 +0,0 @@
-**/node_modules
-build
-dist

package/boilerplate/common/eslint/.eslintrc.cjs

@@ -1,38 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    es6: true,
-    node: true,
-  },
-  plugins: ['prettier'],
-  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'prettier'],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    quotes: [2, 'single', 'avoid-escape'],
-    semi: [2, 'never'],
-    'no-extra-boolean-cast': 'off',
-    'no-unused-vars': [
-      1,
-      {
-        argsIgnorePattern: 'res|next|^err',
-      },
-    ],
-    'prettier/prettier': [
-      'error',
-      {
-        trailingComma: 'es5',
-        singleQuote: true,
-        tabWidth: 2,
-        semi: false,
-        printWidth: 100,
-      },
-    ],
-  },
-  parserOptions: {
-    parser: 'babel-eslint',
-    ecmaVersion: 2020,
-    sourceType: 'module',
-  },
-}

package/boilerplate/common/eslint/husky/pre-commit

@@ -1,2 +0,0 @@
-#!/bin/bash
-npx lint-staged

package/boilerplate/common/eslint/package.json

@@ -1,20 +0,0 @@
-{
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "devDependencies": {
-    "eslint": "^8.8.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.3.3",
-    "prettier": "^2.5.1"
-  }
-}

package/boilerplate/common/git/gitignore

@@ -1,8 +0,0 @@
-.DS_Store
-.env
-.env.*
-!.env.example
-
-node_modules
-build
-dist

package/boilerplate/common/ide/.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-	"recommendations": [
-		"editorconfig.editorconfig",
-		"dbaeumer.vscode-eslint",
-    "naumovs.color-highlight",
-    "LightningJS.lightning-blits"
-	]
-}

package/boilerplate/common/ide/.vscode/launch.json

@@ -1,12 +0,0 @@
-{
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Launch Chrome",
-            "request": "launch",
-            "type": "chrome",
-            "url": "http://localhost:8000",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}

package/boilerplate/common/ide/.vscode/settings.json

@@ -1,10 +0,0 @@
-{
-  "editor.formatOnSave": false,
-  "eslint.validate": [
-    "javascript"
-  ],
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "js/ts.implicitProjectConfig.checkJs": true
-}

package/boilerplate/js/default/.env.example

@@ -1,4 +0,0 @@
-# all environment variables need to prefixed with VITE_*
-# to read, use import.meta.env.VITE_FOO
-
-# VITE_FOO=bar

package/boilerplate/js/default/.gitattributes

@@ -1,3 +0,0 @@
-*.js text eol=lf
-*.cjs text eol=lf
-*.jsx text eol=lf

package/boilerplate/js/default/index.html

@@ -1,11 +0,0 @@
-<html>
-    <head>
-      <style>
-        html, body, * { padding: 0; margin: 0}
-      </style>
-    </head>
-    <body>
-        <div id="app"></div>
-        <script type="module" src="src/index.js"></script>
-    </body>
-</html>

package/boilerplate/js/default/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "{$appPackage}",
-  "version": "0.1.0",
-  "description": "{$appName}",
-  "main": "index.js",
-  "type": "module",
-  "scripts": {
-    "start": "npm run dev",
-    "lint": "eslint '**/*.js'",
-    "lint:fix": "eslint '**/*.js' --fix",
-    "build": "vite build",
-    "dev": "vite dev --host"
-  },
-  "lint-staged": {
-    "*.js": [
-      "eslint --fix"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "devDependencies": {
-    "eslint": "^8.8.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "husky": "^7.0.4",
-    "lint-staged": "^12.3.3",
-    "prettier": "^2.5.1",
-    "vite": "^4.0.4"
-  },
-  "dependencies": {
-    "@lightningjs/blits": "{$blitsVersion}"
-  }
-}

package/boilerplate/js/default/src/App.js

@@ -1,12 +0,0 @@
-import Blits from '@lightningjs/blits'
-
-import Home from './pages/Home.js'
-
-export default Blits.Application({
-  template: `
-    <Element>
-      <RouterView />
-    </Element>
-   `,
-  routes: [{ path: '/', component: Home }],
-})

package/boilerplate/js/default/src/components/Loader.js

@@ -1,23 +0,0 @@
-import Blits from '@lightningjs/blits'
-
-export default Blits.Component('Loading', {
-  template: `
-    <Element>
-      <Circle size="40" color="#94a3b8" :alpha.transition="{value: $alpha, delay: 200}" />
-      <Circle size="40" color="#94a3b8" x="60" :alpha.transition="{value: $alpha, delay: 300}" />
-      <Circle size="40" color="#94a3b8" x="120" :alpha.transition="{value: $alpha, delay: 400}" />
-    </Element>
-  `,
-  state() {
-    return {
-      alpha: 0,
-    }
-  },
-  hooks: {
-    ready() {
-      this.$setInterval(() => {
-        this.alpha = this.alpha === 1 ? 0 : 1
-      }, 800)
-    },
-  },
-})

package/boilerplate/js/default/src/index.js

@@ -1,27 +0,0 @@
-import Blits from '@lightningjs/blits'
-import App from './App.js'
-
-Blits.Launch(App, 'app', {
-  w: 1920,
-  h: 1080,
-  multithreaded: false,
-  debugLevel: 1,
-  defaultFont: 'lato',
-  fonts: [
-    {
-      family: 'lato',
-      type: 'msdf',
-      file: 'fonts/Lato-Regular.ttf',
-    },
-    {
-      family: 'raleway',
-      type: 'msdf',
-      file: 'fonts/Raleway-ExtraBold.ttf',
-    },
-    {
-      family: 'opensans',
-      type: 'web',
-      file: 'fonts/OpenSans-Medium.ttf',
-    },
-  ],
-})

package/boilerplate/js/default/src/pages/Home.js

@@ -1,15 +0,0 @@
-import Blits from '@lightningjs/blits'
-
-import Loader from '../components/Loader.js'
-
-export default Blits.Component('Home', {
-  components: {
-    Loader,
-  },
-  template: `
-    <Element w="1920" h="1080" color="#1e293b">
-      <Element src="assets/logo.png" w="200" h="200" x="860" y="320" :effects="[$shader('radius', {radius: 12})]" />
-      <Loader x="880" y="600" />
-    </Element>
-  `,
-})

package/boilerplate/js/default/vite.config.js

@@ -1,26 +0,0 @@
-/// <reference types="vite/client" />
-
-import { defineConfig } from 'vite'
-import blitsVitePlugins from '@lightningjs/blits/vite'
-
-export default defineConfig(({ command, mode, ssrBuild }) => {
-  return {
-    base: '/', // Set to your base path if you are deploying to a subdirectory (example: /myApp/)
-    plugins: [...blitsVitePlugins],
-    resolve: {
-      mainFields: ['browser', 'module', 'jsnext:main', 'jsnext'],
-    },
-    server: {
-      headers: {
-        'Cross-Origin-Opener-Policy': 'same-origin',
-        'Cross-Origin-Embedder-Policy': 'require-corp',
-      },
-      fs: {
-        allow: ['..'],
-      },
-    },
-    worker: {
-      format: 'es',
-    },
-  }
-})