@lightningjs/blits 0.5.10 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# v0.6.0
+
+_4 jan 2024_
+
+- Added pre-compilation functionality to improve performance. Requires an update to the `vite.config.js` to enable. Read more details in this [blog post](https://lightningjs.io/blogs/blitsPreCompilation.html)
+- Added `defaultFont` to the Launch settings
+
 # v0.5.10
 
 _3 jan 2024_

package/boilerplate/package.json

@@ -31,6 +31,6 @@
     "vite": "^4.0.4"
   },
   "dependencies": {
-    "@lightningjs/blits": "^0.5.10"
+    "@lightningjs/blits": "^0.6.0"
   }
 }

package/boilerplate/vite.config.js

@@ -1,9 +1,9 @@
 import { defineConfig } from 'vite'
-import { importChunkUrl } from '@lightningjs/blits/vite'
+import blitsVitePlugins from '@lightningjs/blits/vite'
 
 export default defineConfig(({ command, mode, ssrBuild }) => {
   return {
-    plugins: [importChunkUrl()],
+    plugins: [...blitsVitePlugins],
     resolve: {
       mainFields: ['browser', 'module', 'jsnext:main', 'jsnext'],
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.5.10",
+  "version": "0.6.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {

package/src/component.js

@@ -47,13 +47,11 @@ const required = (name) => {
 }
 
 const Component = (name = required('name'), config = required('config')) => {
-  let code = null
-
   const setupComponent = (lifecycle) => {
     // code generation
-    if (!code) {
+    if (!config.code) {
       Log.debug(`Generating code for ${name} component`)
-      code = codegenerator.call(config, parser(config.template))
+      config.code = codegenerator.call(config, parser(config.template))
     }
 
     setupBase(component)
@@ -167,7 +165,7 @@ const Component = (name = required('name'), config = required('config')) => {
     this.lifecycle.state = 'init'
 
     Object.defineProperty(this, symbols.children, {
-      value: code.render.apply(stage, [parentEl, this, code.context]),
+      value: config.code.render.apply(stage, [parentEl, this, config]),
       writable: false,
       enumerable: false,
       configurable: false,
@@ -180,9 +178,9 @@ const Component = (name = required('name'), config = required('config')) => {
       configurable: false,
     })
 
-    code.effects.forEach((eff) => {
+    config.code.effects.forEach((eff) => {
       effect(() => {
-        eff.apply(stage, [this, this[symbols.children], code.context])
+        eff.apply(stage, [this, this[symbols.children], config])
       })
     })
 

package/src/components/Text.js

@@ -16,6 +16,7 @@
  */
 
 import Component from '../component.js'
+import Settings from '../settings.js'
 
 export default () =>
   Component('Text', {
@@ -41,7 +42,7 @@ export default () =>
       'content',
       {
         key: 'font',
-        default: 'lato',
+        default: Settings.get('defaultFont', 'lato'),
       },
       {
         key: 'size',

package/src/launch.d.ts

@@ -90,6 +90,15 @@ export interface Settings {
    * Fonts to be used in the Application
    */
   fonts?: Font[],
+  /**
+   * Default font family to use in the Application when no font attribute is specified
+   * on a Text-component
+   *
+   * The default font must be registered in the `fonts` array in the settings.
+   *
+   * Defaults to `lato` font family
+   */
+  defaultFont?: string,
   /**
    * Custom keymapping
    */

package/src/lib/codegenerator/generator.js

@@ -92,8 +92,8 @@ const generateElementCode = function (
   if (options.holder === true) {
     renderCode.push(`
     if(typeof cmp${counter} !== 'undefined') {
-      for(key in cmp${counter}.config.props) {
-        delete elementConfig${counter}[cmp${counter}.config.props[key]]
+      for(let key in cmp${counter}.config.props) {
+        delete  elementConfig${counter}[cmp${counter}.config.props[key]]
       }
     }
     `)
@@ -171,7 +171,7 @@ const generateComponentCode = function (
 
   renderCode.push(`
     if(!${elm}) {
-      ${elm} = (context.components && context.components['${templateObject.type}'] || component[Symbol.for('components')]['${templateObject.type}'] || (() => { console.log('component ${templateObject.type} not found')})).call(null, {props: props${counter}}, ${parent}, component)
+      ${elm} = (context.components && context.components['${templateObject.type}'] || component[Symbol.for('components')]['${templateObject.type}'] || (() => { console.error('component ${templateObject.type} not found')})).call(null, {props: props${counter}}, ${parent}, component)
       if (${elm}[Symbol.for('slots')][0]) {
         parent = ${elm}[Symbol.for('slots')][0]
         component = ${elm}

package/vite/index.js

@@ -1 +1,7 @@
+import preCompiler from './preCompiler.js'
+import { importChunkUrl } from '@lightningjs/vite-plugin-import-chunk-url'
+
 export { importChunkUrl as importChunkUrl } from '@lightningjs/vite-plugin-import-chunk-url'
+export { default as preCompiler } from './preCompiler.js'
+
+export default [importChunkUrl(), preCompiler()]

package/vite/preCompiler.js

@@ -0,0 +1,46 @@
+import parser from '../src/lib/templateparser/parser.js'
+import generator from '../src/lib/codegenerator/generator.js'
+
+export default function () {
+  let config
+  return {
+    name: 'preCompiler',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+    },
+    transform(source) {
+      if (config.blits && config.blits.precompile === false) return source
+      if (source.indexOf('Blits.Component(') > -1 || source.indexOf('Blits.Application(') > -1) {
+        // get the start of the template key in de component configuration object
+        const templateKeyRegex = /template:\s*([`"'])*/g
+        const templateStartResult = templateKeyRegex.exec(source)
+        const typeOfQuotesUsed = templateStartResult[1]
+        const templateStartIndex = templateStartResult.index
+
+        // get the template contents from the configuration object
+        const templateContentsRegex = new RegExp(
+          `${typeOfQuotesUsed}([\\s\\S]*?)${typeOfQuotesUsed}`
+        )
+
+        const templateContentResult = templateContentsRegex.exec(source.slice(templateStartIndex))
+        const templateEndIndex =
+          templateStartIndex + templateContentResult.index + templateContentResult[0].length
+
+        // Parse the template
+        const parsed = parser(templateContentResult[1])
+
+        // Generate the code
+        const code = generator.call({ components: {} }, parsed)
+
+        // Insert the code in the component using the 'code' key, replacing the template key
+        const replacement = `code: { render: ${code.render.toString()}, effects: [${code.effects.map(
+          (fn) => fn.toString() + ','
+        )}], context: {}}`
+        const newSource =
+          source.substring(0, templateStartIndex) + replacement + source.substring(templateEndIndex)
+
+        return newSource
+      }
+    },
+  }
+}