New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@lwrjs/client-modules
Advanced tools
@lwrjs/client-modules - npm Package Compare versions
Comparing version 0.0.2-alpha6 to 0.0.2-alpha7
@@ -29,4 +29,5 @@ "use strict"; | ||
| specifier, | ||
| path: absFilepath, | ||
| type: 'text/javascript', | ||
| type: 'application/javascript', | ||
| defer: true, | ||
| stream: fs_1.default.createReadStream(absFilepath), | ||
| src: this.context.resourceRegistry.resolveResourceUri(resource, context), | ||
@@ -33,0 +34,0 @@ }; |
@@ -1,3 +0,2 @@ | ||
| // @ts-nocheck | ||
| import { registerTemplateSwap, registerStyleSwap, registerComponentSwap } from 'lwc'; | ||
| import { updateStaleModule } from './util/swap'; | ||
@@ -7,9 +6,6 @@ export function initHMR() { | ||
| const isDevMode = globalThis.process.env.NODE_ENV === 'dev'; | ||
| if (isDevMode) { | ||
| const socket = new WebSocket(`ws://${location.host}`); | ||
| socket.addEventListener('message', async ({ data }) => { | ||
| const event = JSON.parse(data); | ||
| if (event.eventType === 'moduleUpdate') { | ||
@@ -21,14 +17,9 @@ const { | ||
| } = event.payload; | ||
| const oldModule = await import(oldUri); | ||
| const newModule = await import(newUri); | ||
| if (name.endsWith('html') && newModule.default) { | ||
| console.log(`Swapping html template for module "${namespace}/${name}"`); | ||
| registerTemplateSwap(oldModule.default, newModule.default); | ||
| } else if (name.endsWith('css') && newModule.default) { | ||
| registerStyleSwap(oldModule.default[0], newModule.default[0]); | ||
| } else { | ||
| registerComponentSwap(oldModule.default, newModule.default); | ||
| } | ||
| updateStaleModule({ | ||
| oldModule, | ||
| newModule, | ||
| specifier: `${namespace}/${name}`, | ||
| }); | ||
| } | ||
@@ -35,0 +26,0 @@ }); |
@@ -20,22 +20,31 @@ /** | ||
| */ | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| export function init(rootAppSpecifier, rootApp) { | ||
| export function init(rootModules) { | ||
| if (typeof customElements !== 'undefined' && typeof document !== 'undefined') { | ||
| const elementName = toKebabCase(rootAppSpecifier); // Add the root to the CustomElementRegistry | ||
| const uniqueRoot = rootModules.length === 1; | ||
| rootModules.forEach(([moduleSpecifier, ctor]) => { | ||
| // Kebab-case the specifier | ||
| const elementName = toKebabCase(moduleSpecifier); // Add the root to the CustomElementRegistry | ||
| customElements.define(elementName, rootApp.CustomElementConstructor); // Append the root element to the DOM, if it does not exist | ||
| customElements.define(elementName, ctor.CustomElementConstructor); | ||
| }); | ||
| const rootEl = document.body.querySelector(elementName); | ||
| if (uniqueRoot) { | ||
| // Append the root element to the DOM, if it does not exist | ||
| const rootElementName = toKebabCase(rootModules[0][0]); | ||
| const rootEl = document.body.querySelector(rootElementName); | ||
| if (!rootEl) { | ||
| const el = document.createElement(elementName); | ||
| const container = document.querySelector('[lwr-root]'); | ||
| if (!rootEl) { | ||
| const el = document.createElement(rootElementName); | ||
| const container = document.querySelector('[lwr-root]'); | ||
| if (container) { | ||
| // Append to a node with the "lwr-root" attribute | ||
| container.appendChild(el); | ||
| } else { | ||
| // Otherwise, add the root to the <body> | ||
| document.body.appendChild(el); | ||
| if (container) { | ||
| // Append to a node with the "lwr-root" attribute | ||
| container.appendChild(el); | ||
| } else { | ||
| // Otherwise, add the root to the <body> | ||
| document.body.appendChild(el); | ||
| } | ||
| } | ||
@@ -42,0 +51,0 @@ } |
@@ -1,3 +0,2 @@ | ||
| // @ts-nocheck | ||
| import { registerTemplateSwap, registerStyleSwap, registerComponentSwap } from 'lwc'; | ||
| import { updateStaleModule } from './util/swap'; | ||
@@ -7,9 +6,6 @@ export function initHMR() { | ||
| const isDevMode = globalThis.process.env.NODE_ENV === 'dev'; | ||
| if (isDevMode) { | ||
| const socket = new WebSocket(`ws://${location.host}`); | ||
| socket.addEventListener('message', async ({ data }) => { | ||
| const event = JSON.parse(data); | ||
| if (event.eventType === 'moduleUpdate') { | ||
@@ -21,14 +17,9 @@ const { | ||
| } = event.payload; | ||
| const oldModule = await import(oldUri); | ||
| const newModule = await import(newUri); | ||
| if (name.endsWith('html') && newModule.default) { | ||
| console.log(`Swapping html template for module "${namespace}/${name}"`); | ||
| registerTemplateSwap(oldModule.default, newModule.default); | ||
| } else if (name.endsWith('css') && newModule.default) { | ||
| registerStyleSwap(oldModule.default[0], newModule.default[0]); | ||
| } else { | ||
| registerComponentSwap(oldModule.default, newModule.default); | ||
| } | ||
| updateStaleModule({ | ||
| oldModule, | ||
| newModule, | ||
| specifier: `${namespace}/${name}`, | ||
| }); | ||
| } | ||
@@ -35,0 +26,0 @@ }); |
@@ -12,6 +12,12 @@ import { init } from '../init'; | ||
| }; | ||
| const TestCmp4 = { | ||
| CustomElementConstructor: class Fake extends HTMLElement {}, | ||
| }; | ||
| const TestCmp5 = { | ||
| CustomElementConstructor: class Fake extends HTMLElement {}, | ||
| }; | ||
| describe('LWR init', () => { | ||
| it('initializes and append root element to <body>', () => { | ||
| init('generated/lauraHomePage', TestCmp); | ||
| it('initializes and appends root element to <body>', () => { | ||
| init([['generated/lauraHomePage', TestCmp]]); | ||
| expect(customElements.get('generated-laura-home-page')).toBeDefined(); | ||
@@ -23,3 +29,3 @@ }); | ||
| document.body.appendChild(container); | ||
| init('c/darrell', TestCmp2); | ||
| init([['c/darrell', TestCmp2]]); | ||
| expect(customElements.get('c-darrell')).toBeDefined(); | ||
@@ -29,9 +35,17 @@ }); | ||
| document.body.appendChild(document.createElement('c-diego')); | ||
| init('c/diego', TestCmp3); | ||
| init([['c/diego', TestCmp3]]); | ||
| expect(customElements.get('c-diego')).toBeDefined(); | ||
| }); | ||
| it('initializes and appends multiple root elements to <body>', () => { | ||
| init([ | ||
| ['c/hunter', TestCmp4], | ||
| ['c/brian', TestCmp5], | ||
| ]); | ||
| expect(customElements.get('c-hunter')).toBeDefined(); | ||
| expect(customElements.get('c-brian')).toBeDefined(); | ||
| }); | ||
| it('initializes in a headless environment', () => { | ||
| const oldCustomElements = customElements; | ||
| delete globalThis.customElements; | ||
| init('c/khang', TestCmp); | ||
| init([['c/khang', TestCmp]]); | ||
| globalThis.customElements = oldCustomElements; | ||
@@ -38,0 +52,0 @@ expect(customElements.get('c-khang')).toBeUndefined(); |
@@ -24,20 +24,29 @@ /** | ||
| */ | ||
| export function init(rootAppSpecifier: string, rootApp): void { | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| export function init(rootModules: any[][]): void { | ||
| if (typeof customElements !== 'undefined' && typeof document !== 'undefined') { | ||
| const elementName = toKebabCase(rootAppSpecifier); | ||
| const uniqueRoot = rootModules.length === 1; | ||
| // Add the root to the CustomElementRegistry | ||
| customElements.define(elementName, rootApp.CustomElementConstructor); | ||
| rootModules.forEach(([moduleSpecifier, ctor]) => { | ||
| // Kebab-case the specifier | ||
| const elementName = toKebabCase(moduleSpecifier); | ||
| // Append the root element to the DOM, if it does not exist | ||
| const rootEl = document.body.querySelector(elementName); | ||
| if (!rootEl) { | ||
| const el = document.createElement(elementName); | ||
| const container = document.querySelector('[lwr-root]'); | ||
| if (container) { | ||
| // Append to a node with the "lwr-root" attribute | ||
| container.appendChild(el); | ||
| } else { | ||
| // Otherwise, add the root to the <body> | ||
| document.body.appendChild(el); | ||
| // Add the root to the CustomElementRegistry | ||
| customElements.define(elementName, ctor.CustomElementConstructor); | ||
| }); | ||
| if (uniqueRoot) { | ||
| // Append the root element to the DOM, if it does not exist | ||
| const rootElementName = toKebabCase(rootModules[0][0]); | ||
| const rootEl = document.body.querySelector(rootElementName); | ||
| if (!rootEl) { | ||
| const el = document.createElement(rootElementName); | ||
| const container = document.querySelector('[lwr-root]'); | ||
| if (container) { | ||
| // Append to a node with the "lwr-root" attribute | ||
| container.appendChild(el); | ||
| } else { | ||
| // Otherwise, add the root to the <body> | ||
| document.body.appendChild(el); | ||
| } | ||
| } | ||
@@ -44,0 +53,0 @@ } |
@@ -7,3 +7,3 @@ { | ||
| }, | ||
| "version": "0.0.2-alpha6", | ||
| "version": "0.0.2-alpha7", | ||
| "homepage": "https://lwr.dev/", | ||
@@ -46,3 +46,3 @@ "repository": { | ||
| }, | ||
| "gitHead": "ff6d9827204eff083e401446015f967688e1c31e" | ||
| "gitHead": "fc1ad7545232af461fb9e2602a311ee39e0bae82" | ||
| } |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.43%
248393
- Number of package files
- increased by8.33%
13
- Lines of code
- increased by0.56%
6303
No dependency changes