@lightningjs/blits 1.5.1 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## v1.6.0
+
+_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.6.1",
   "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/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.',
@@ -450,8 +453,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/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/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'

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',
-    },
-  }
-})