@lwrjs/client-modules 0.10.0-alpha.12 → 0.10.0-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build/bundle/prod/lwr/init/init.js +2 -1
  2. package/build/bundle/prod/lwr/lockerDefine/lockerDefine.js +2 -1
  3. package/build/bundle/prod/lwr/servicesESM/servicesESM.js +1 -0
  4. package/build/modules/lwr/environment/environment.js +1 -0
  5. package/build/modules/lwr/init/init.js +97 -52
  6. package/build/modules/lwr/lockerDefine/lockerDefine.js +2091 -2230
  7. package/build/modules/lwr/lockerSandbox/lockerSandbox.js +2096 -2234
  8. package/build/modules/lwr/metrics/metrics.js +7 -0
  9. package/build/modules/lwr/profiler/profiler.js +41 -10
  10. package/package.json +9 -6
package/build/bundle/prod/lwr/servicesESM/servicesESM.js CHANGED
@@ -1 +1,2 @@
1
1
  const o=[];let e;const t=globalThis.LWR;globalThis.LWR.define?globalThis.LWR=Object.freeze({define:globalThis.LWR.define}):delete globalThis.LWR;const n={addLoaderPlugin:()=>{console.warn("API is not supported in ESM format")},handleStaleModule:function(t){o.push(t),e||(e=new WebSocket(`ws://${location.host}`),e.addEventListener("message",(async({data:e})=>{const t=JSON.parse(e);if("moduleUpdate"===t.eventType){const{oldHash:e,newHash:n,module:{specifier:a}}=t.payload;for(let t=0;t<o.length;t++){if(null!==(0,o[t])({name:a,oldHash:e,newHash:n}))break}}})))},appMetadata:function(){const{appId:o,bootstrapModule:e,rootComponent:n,rootComponents:a}=t;return{appId:o,bootstrapModule:e,rootComponent:n,rootComponents:a}}()};export{n as services};
2
+ //# sourceMappingURL=servicesESM.js.map
package/build/modules/lwr/environment/environment.js ADDED
@@ -0,0 +1 @@
1
+ export const isServer = process && process.env && (process.env.SSR === 'true' || process.env.SSR);
package/build/modules/lwr/init/init.js CHANGED
@@ -1,9 +1,9 @@
1
1
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
2
2
  // @ts-ignore
3
- import { BOOTSTRAP_END } from 'lwr/metrics';
3
+ import { BOOTSTRAP_END, INIT, INIT_MODULE } from 'lwr/metrics';
4
4
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
5
5
  // @ts-ignore
6
- import { logOperationStart } from 'lwr/profiler';
6
+ import { logOperationStart, logOperationEnd } from 'lwr/profiler';
7
7
 
8
8
  // TODO: This is a temporal workaround until https://github.com/salesforce/lwc/pull/2083 is sorted - tmp
9
9
  import { createElement } from 'lwc';
@@ -52,64 +52,109 @@ export function getPropFromAttrName(propName) {
52
52
  * @example - [['x/appRoot', appCtor], ['x/nav', navCtor]]
53
53
  */
54
54
  export function init(rootModules, ssrProps = {}) {
55
- if (typeof customElements !== 'undefined' && typeof document !== 'undefined') {
56
- const container = document.querySelector('[lwr-root]');
57
- rootModules.forEach(([moduleSpecifier, ctor]) => {
58
- // Kebab-case the specifier
59
- const elementName = toKebabCase(moduleSpecifier);
55
+ if (typeof customElements === 'undefined' || typeof document === 'undefined') {
56
+ logOperationStart({
57
+ id: BOOTSTRAP_END
58
+ });
59
+ return;
60
+ }
61
+ logOperationStart({
62
+ id: INIT
63
+ });
64
+ let index = 0;
65
+ for (const [specifier, ctor] of rootModules) {
66
+ const elementName = toKebabCase(specifier);
67
+
68
+ // initialize and inject the root module into the LWR Root or DOM if it is missing
69
+ if (!document.body.querySelector(elementName)) {
70
+ logOperationStart({
71
+ id: INIT_MODULE,
72
+ specifier,
73
+ specifierIndex: ++index
74
+ });
60
75
 
61
- // Append the root element to the DOM, if it does not exist
62
76
  // this is for SPA like routes (one component at the root level) utilizing the lwr-root directive
63
- let el = document.body.querySelector(elementName);
64
- if (!el) {
65
- el = initializeWebComponent(elementName, ctor);
66
- if (container) {
67
- // Append to a node with the "lwr-root" attribute
68
- container.appendChild(el);
69
- } else {
70
- // Otherwise, add the root to the <body>
71
- document.body.appendChild(el);
77
+ const component = initializeWebComponent(elementName, ctor);
78
+ const container = document.querySelector('[lwr-root]');
79
+ container ? container.appendChild(component) : document.body.appendChild(component);
80
+ logOperationEnd({
81
+ id: INIT_MODULE,
82
+ specifier,
83
+ specifierIndex: index,
84
+ metadata: {
85
+ renderMode: 'spa'
72
86
  }
73
- } else {
74
- // We have rendered/ssr-ed an HTML page and we need to reify the components
75
- // Due to the bug described on the header, for each custom element
76
- // we collect the attributes and we replace the element with the new synthetic constructor
77
- const customElements = document.querySelectorAll(elementName);
78
- customElements.forEach(customElement => {
79
- const propsId = customElement.dataset.lwrPropsId;
80
- if (propsId) {
81
- // Hydrate an SSRed component
82
- const props = ssrProps[propsId] || {};
83
- hydrateComponentProxy(customElement, ctor, props);
84
- } else {
85
- // Create a CSRed component
86
- const newElement = initializeWebComponent(elementName, ctor);
87
- for (const {
88
- name,
89
- value
90
- } of customElement.attributes) {
91
- newElement.setAttribute(name, value);
92
- const prop = getPropFromAttrName(name);
93
- if (prop in newElement) {
94
- // Set attributes as properties too for reactivity
95
- newElement[prop] = value;
96
- }
97
- }
87
+ });
88
+ continue;
89
+ }
98
90
 
99
- // Move the children and replace the custom element
100
- while (customElement.childNodes.length > 0) {
101
- newElement.appendChild(customElement.childNodes[0]);
102
- }
103
- if (customElement.parentElement) {
104
- customElement.parentElement.replaceChild(newElement, customElement);
105
- } else if (console) {
106
- console.error(`[lwr/init] parentElement not set: %o`, customElement);
107
- }
91
+ // the page has been rendered or SSR'd, and each component needs to initialized(or hydrated)
92
+ const elements = document.querySelectorAll(elementName);
93
+ for (const element of elements) {
94
+ logOperationStart({
95
+ id: INIT_MODULE,
96
+ specifier,
97
+ specifierIndex: ++index
98
+ });
99
+ const propsId = element.dataset.lwrPropsId;
100
+
101
+ // hydrate SSR'd components
102
+ if (propsId) {
103
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
104
+ // @ts-ignore
105
+ hydrateComponentProxy(element, ctor, ssrProps[propsId] || {});
106
+ logOperationEnd({
107
+ id: INIT_MODULE,
108
+ specifier,
109
+ specifierIndex: index,
110
+ metadata: {
111
+ renderMode: 'ssr'
108
112
  }
109
113
  });
114
+ continue;
110
115
  }
111
- });
116
+
117
+ // Note: due to the bug described at the top of this file, each CSR'd custom element
118
+ // must be replaced with the new synthetic constructor. Attributes and children are
119
+ // copied over to the new component.
120
+ const component = initializeWebComponent(elementName, ctor);
121
+
122
+ // copy the attributes
123
+ for (const {
124
+ name,
125
+ value
126
+ } of element.attributes) {
127
+ component.setAttribute(name, value);
128
+ const prop = getPropFromAttrName(name);
129
+ if (prop in component) {
130
+ // set attributes as properties for reactivity
131
+ component[prop] = value;
132
+ }
133
+ }
134
+
135
+ // save the children
136
+ while (element.childNodes.length > 0) {
137
+ component.appendChild(element.childNodes[0]);
138
+ }
139
+
140
+ // swap the element out with the initialized component
141
+ const parent = element.parentElement;
142
+ if (parent) {
143
+ parent.replaceChild(component, element);
144
+ }
145
+ logOperationEnd({
146
+ id: INIT_MODULE,
147
+ specifier,
148
+ specifierIndex: index,
149
+ metadata: {
150
+ renderMode: 'csr'
151
+ }
152
+ });
153
+ }
112
154
  }
155
+ logOperationEnd({
156
+ id: INIT
157
+ });
113
158
  logOperationStart({
114
159
  id: BOOTSTRAP_END
115
160
  });