diff --git a/CHANGELOG.md b/CHANGELOG.md index b3fb70c3..66d1a3c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,19 @@ # Changelog +## v2.12.0 +*26 oct 2023* + +- Introduced a named export for Lightning in the ESM build to support direct module augmentation with `@lightningjs/core`, resolving issues with default export augmentation. (#480) +- Modified the export structure to support tree-shaking. Lightning's ES modules can now be selectively imported /tree-shaken. (#490) +- Enabled development in both TypeScript and JavaScript. Migrated specific files and ensured all source module files are appropriately managed in the `dist` directory. +- Separated the Lightning Inspector with types as its own export. +- Resolved an inconsistency in the zSorting algorithm where elements with the same zIndex were not correctly sorted by updateTreeOrder. (#443) +- Addressed an exception causing infinite loops when accessing the texture.source property after text updates. This fix streamlines access to the renderInfo property without triggering a maximum call stack exception. (#447 and #348) +- Resolved an issue where adding an already existing element to childList would throw an error. (#311 and #509) +- Fixed an issue where SVG `txError` events were not being triggered due to missed error captures. +- Fixed an issue where `txLoaded` event in elements over-fired due to incorrect texture change identification. + + ## v2.11.0 *31 july 2023* diff --git a/banner.vite-plugin.ts b/banner.vite-plugin.ts index 73e9d6ac..7143377b 100644 --- a/banner.vite-plugin.ts +++ b/banner.vite-plugin.ts @@ -12,7 +12,7 @@ export function banner(bannerText: string): Plugin { generateBundle(options, bundle) { // Add banner to the beginning of each chunk Object.keys(bundle).forEach((key) => { - const file = bundle[key]; + const file = bundle[key]!; if (file.type === 'chunk') { file.code = bannerText + '\n' + file.code; } diff --git a/src/inspector.d.mts b/devtools/lightning-inspect.d.ts similarity index 61% rename from src/inspector.d.mts rename to devtools/lightning-inspect.d.ts index b607c472..073da2c2 100644 --- a/src/inspector.d.mts +++ b/devtools/lightning-inspect.d.ts @@ -2,7 +2,7 @@ * If not stated otherwise in this file or this component's LICENSE file the * following copyright and licenses apply: * - * Copyright 2022 Metrological + * Copyright 2023 Metrological * * Licensed under the Apache License, Version 2.0 (the License); * you may not use this file except in compliance with the License. @@ -16,10 +16,28 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import lng from './lightning.mjs'; +import type { + Application, + Component, + Element, + ElementCore, + ElementTexturizer, + Stage, + Texture, +} from "../dist/src"; + +declare interface ILng { + Application?: typeof Application; + Component?: typeof Component; + Element: typeof Element; + ElementCore: typeof ElementCore; + ElementTexturizer: typeof ElementTexturizer; + Stage: typeof Stage; + Texture: typeof Texture; +} declare global { interface Window { - attachInspector?(Lightning: typeof lng): void; + attachInspector(lng: ILng): void; } } diff --git a/devtools/lightning-inspect.js b/devtools/lightning-inspect.js index e1ba5238..c6ca3bf2 100644 --- a/devtools/lightning-inspect.js +++ b/devtools/lightning-inspect.js @@ -843,18 +843,20 @@ window.attachInspector = function({Application, Element, ElementCore, Stage, Com updateTextureAttribs(this) } - const _updateFocus = Application.prototype.__updateFocus - Application.prototype.__updateFocus = function() { - const prev = this._focusPath && this._focusPath.length ? this._focusPath[this._focusPath.length - 1] : null; - _updateFocus.apply(this, arguments) - const focused = this._focusPath && this._focusPath.length ? this._focusPath[this._focusPath.length - 1] : null; - - if (prev != focused) { - if (prev) { - val(prev, 'focused', false, false); - } - if (focused) { - val(focused, 'focused', true, false); + if (typeof Application !== "undefined") { + const _updateFocus = Application.prototype.__updateFocus + Application.prototype.__updateFocus = function() { + const prev = this._focusPath && this._focusPath.length ? this._focusPath[this._focusPath.length - 1] : null; + _updateFocus.apply(this, arguments) + const focused = this._focusPath && this._focusPath.length ? this._focusPath[this._focusPath.length - 1] : null; + + if (prev != focused) { + if (prev) { + val(prev, 'focused', false, false); + } + if (focused) { + val(focused, 'focused', true, false); + } } } } diff --git a/docs/PackageExports/index.md b/docs/PackageExports/index.md new file mode 100644 index 00000000..456da1a5 --- /dev/null +++ b/docs/PackageExports/index.md @@ -0,0 +1,49 @@ +# Package Exports / Tree Shaking + +The Lightning Core NPM package exports both the Lightning Core library (the default package export: "@lightningjs/core") as well as the Lightning Inspector ("@lightningjs/core/inspector"). Both the [ES](https://nodejs.org/api/esm.html#modules-ecmascript-modules) and [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules) module styles are supported by both package exports. + +> CommonJS is currently provided mainly to support older build tooling that may still be in use by applications. It is recommended that you upgrade/configure your build tools/bundler to utilize the ES modules when possible. + +## Lightning Core (Tree Shakable ESM Exports) + +```js +// ESM (tree shakable named exports) +import { Application, Component } from "@lightningjs/core"; +``` + +Lightning Core has historically always been available as a single default exported object from which you can access all of the various Lightning classes. As of version 2.12, when using ESM, each Lightning class is now also available as a seperate tree shakable named export. + +Exclusively using the named ESM exports in your application enables the potential for your chosen bundler to [tree shake](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) Lightning's code so that the parts of Lightning that are not utilized by your application are left out of your bundle, reducing its size. + +> Important: In order for tree shaking to be successful, your entire application, including any dependencies that are also dependent on Lightning must also utilize the named ESM exports. At the time of this writing, no published Lightning-based NPM packages utilize the tree shakable exports. So if your application is dependent on any, your bundler will be unable to tree shake Lightning. + +## Lightning Core (Default Export) + +```js +// ESM (default export) +import Lightning from "@lightningjs/core"; + +// CommonJS +const Lightning = require("@lightningjs/core"); +``` + +The default export, as mentioned above, has historically been the main way users import Lightning Core. All of Lightning Core is available from this single exported object and as such, if imported, will prevent your chosen bundler from being able to tree shake Lightning. + +## Lightning Inspector + +```js +// ESM +import "@lightningjs/core/inspector"; + +// ESM (Dynamic) +await import("@lightningjs/core/inspector"); + +// CommonJS +require("@lightningjs/core/inspector"); +``` + +Outside of including the Lightning Inspector via a seperate `