@stencil/core 5.0.0-beta.35 → 5.0.0-beta.36

package/dist/{client-UbH-XkYu.mjs → client-CqQpuOUk.mjs}

@@ -146,7 +146,16 @@ const NODE_TYPE = {
 	DocumentTypeNode: 10,
 	DocumentFragment: 11
 };
+const HYDRATE_ID = "s-id";
 const HYDRATED_STYLE_ID = "sty-id";
+const HYDRATE_CHILD_ID = "c-id";
+/**
+* Starts an attribute value written by the `ssr` output's `ssrProp()` on a server: a reference to
+* a value it put in the registry below, for the SSR runtime to take out and set as the prop.
+*/
+const SSR_PROP_REF_PREFIX = "__stencil_ssr_ref:";
+/** `Symbol.for()` key of the `ssrProp()` registry on the server's real global object. */
+const SSR_PROPS_REGISTRY_KEY = "stencil.ssrProps";
 const HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
 /**
 * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
@@ -804,7 +813,7 @@ const emitEvent = (elm, name, opts) => {
 	elm.dispatchEvent(ev);
 	return ev;
 };
-const getRegistry = () => customElements;
+const getRegistry = () => globalThis.customElements;
 /**
 * @param elm a defined component host
 * @returns the registry the host's class was defined in, else the active registry
@@ -2480,4 +2489,4 @@ function hasKeys(obj) {
 	return false;
 }
 //#endregion
-export { Build as C, SERVER_BUILD_FLAGS as E, setErrorHandler as S, HYDRATED_CSS as T, getAssetPath as _, transformTag as a, writeTask as b, Mixin as c, Host as d, h as f, getShadowRoot as g, getElement as h, setTagTransformer as i, getMode as l, getRenderingRef as m, jsxDEV as n, render as o, forceUpdate as p, jsxs as r, ReactiveControllerHost as s, jsx as t, setMode as u, setAssetPath as v, CLIENT_BUILD_FLAGS as w, setPlatformHelpers as x, readTask as y };
+export { SSR_PROP_REF_PREFIX as A, Build as C, HYDRATE_ID as D, HYDRATE_CHILD_ID as E, SERVER_BUILD_FLAGS as O, setErrorHandler as S, HYDRATED_CSS as T, getAssetPath as _, transformTag as a, writeTask as b, Mixin as c, Host as d, h as f, getShadowRoot as g, getElement as h, setTagTransformer as i, SSR_PROPS_REGISTRY_KEY as k, getMode as l, getRenderingRef as m, jsxDEV as n, render as o, forceUpdate as p, jsxs as r, ReactiveControllerHost as s, jsx as t, setMode as u, setAssetPath as v, CLIENT_BUILD_FLAGS as w, setPlatformHelpers as x, readTask as y };

package/dist/compiler/browser.js

@@ -1843,7 +1843,7 @@ const validateComponentTag = (tag) => {
 };
 //#endregion
 //#region src/version.ts
-const version = "5.0.0-beta.35";
+const version = "5.0.0-beta.36";
 //#endregion
 //#region src/compiler/events.ts
 const buildEvents = () => {
@@ -8879,6 +8879,9 @@ const objectLiteralToObjectMap = (objectLiteral, typeChecker, diagnostics, error
 				case ts$1.SyntaxKind.FalseKeyword:
 					val = false;
 					break;
+				case ts$1.SyntaxKind.NullKeyword:
+					val = null;
+					break;
 				case ts$1.SyntaxKind.Identifier:
 					const escapedText = propAssignment.initializer.escapedText;
 					if (escapedText === "String") val = String;
@@ -9065,7 +9068,7 @@ const getAllTypeReferences = (checker, node) => {
 */
 const getTypeReferenceLocation = (typeName, type, sourceFile, checker, program) => {
 	const importTypeDeclaration = sourceFile.statements.find((st) => {
-		if (!(ts$1.isImportDeclaration(st) && st.importClause && ts$1.isImportClause(st.importClause) && st.importClause.namedBindings && ts$1.isNamedImports(st.importClause.namedBindings) && Array.isArray(st.importClause.namedBindings.elements) && st.importClause.namedBindings.elements.find((nbe) => nbe.name.getText() === typeName))) return false;
+		if (!(ts$1.isImportDeclaration(st) && st.importClause && ts$1.isImportClause(st.importClause) && st.importClause.namedBindings && ts$1.isNamedImports(st.importClause.namedBindings) && Array.isArray(st.importClause.namedBindings.elements) && st.importClause.namedBindings.elements.find((nbe) => nbe.name.text === typeName))) return false;
 		return true;
 	});
 	const namedImportBindings = importTypeDeclaration?.importClause?.namedBindings;
@@ -9074,7 +9077,7 @@ const getTypeReferenceLocation = (typeName, type, sourceFile, checker, program)
 		const options = program.getCompilerOptions();
 		const importHomeModule = getHomeModule(sourceFile, localImportPath, options, ts$1.createCompilerHost(options), program);
 		if (importHomeModule) {
-			const importElement = namedImportBindings.elements.find((nbe) => nbe.name.getText() === typeName);
+			const importElement = namedImportBindings.elements.find((nbe) => nbe.name.text === typeName);
 			const importName = importElement.name;
 			const originalTypeName = getOriginalTypeName(importName, checker);
 			const importedAs = importElement.propertyName ? importElement.propertyName.getText() : typeName;
@@ -10498,7 +10501,7 @@ const performAutomaticKeyInsertion = (transformCtx) => {
 	* @returns the result of handling the node
 	*/
 	function findRenderMethodVisitor(node) {
-		if (ts$1.isMethodDeclaration(node) && node.name.getText() === "render" && numReturnStatements(node) === 1) {
+		if (ts$1.isMethodDeclaration(node) && ts$1.isIdentifier(node.name) && node.name.text === "render" && numReturnStatements(node) === 1) {
 			resetKeyCounter();
 			return ts$1.visitEachChild(node, jsxElementVisitor, transformCtx);
 		} else return ts$1.visitEachChild(node, findRenderMethodVisitor, transformCtx);
@@ -12454,8 +12457,8 @@ var ImportAliasMap = class extends Map {
 		for (const importDeclaration of importDeclarations) if (importDeclaration.moduleSpecifier.getText().includes("@stencil/core")) {
 			const namedBindings = importDeclaration.importClause?.namedBindings;
 			if (namedBindings && ts$1.isNamedImports(namedBindings)) for (const element of namedBindings.elements) {
-				const importName = element.name.getText();
-				const originalImportName = element.propertyName?.getText() ?? importName;
+				const importName = element.name.text;
+				const originalImportName = element.propertyName?.text ?? importName;
 				if (STENCIL_DECORATORS.includes(originalImportName)) this.set(originalImportName, importName);
 			}
 		}
@@ -12465,6 +12468,102 @@ var ImportAliasMap = class extends Map {
 	}
 };
 //#endregion
+//#region src/compiler/transformers/decorators-to-static/json-serialize-prop.ts
+/**
+* `@Prop({ serialize: 'json' })` is shorthand for a `@PropSerialize()` / `@AttrDeserialize()` pair
+* that writes the value to the prop's attribute as JSON on the server, and reads it back in the
+* browser. These are the generated methods' names (no leading `_`: the runtime metadata drops
+* those keys), and the alias of the `Build` import they use.
+*/
+const JSON_SERIALIZE_METHOD = "stencilSerializeJson";
+const JSON_DESERIALIZE_METHOD = "stencilDeserializeJson";
+const BUILD_ALIAS = "__stencil_Build";
+/**
+* Find the props declared `@Prop({ serialize: 'json' })`, reporting invalid combinations.
+* @param diagnostics for surfacing errors
+* @param typeChecker a TypeScript typechecker instance
+* @param decoratedMembers the class's decorated members
+* @param propDecoratorName the name `@Prop` is imported as
+* @param handWritten serializers and deserializers written with the decorators
+* @returns the names of the props to serialize as JSON
+*/
+const getJsonSerializedProps = (diagnostics, typeChecker, decoratedMembers, propDecoratorName, handWritten) => decoratedMembers.flatMap((member) => {
+	if (!ts$1.isPropertyDeclaration(member) && !ts$1.isGetAccessor(member)) return [];
+	const decorator = retrieveTsDecorators(member)?.find(isDecoratorNamed(propDecoratorName));
+	if (!decorator) return [];
+	const [options] = getDecoratorParameters(decorator, typeChecker);
+	if (options?.serialize == null) return [];
+	const { staticName: propName } = tsPropDeclName(member, typeChecker);
+	const error = (messageText) => {
+		const err = buildError(diagnostics);
+		err.messageText = messageText;
+		augmentDiagnosticWithNode(err, decorator);
+	};
+	if (options.serialize !== "json") {
+		error(`@Prop({ serialize }) on "${propName}" must be 'json'. For other formats, use @PropSerialize() and @AttrDeserialize().`);
+		return [];
+	}
+	if (options.attribute === null) {
+		error(`@Prop({ serialize: 'json' }) on "${propName}" needs an attribute to write to, but it has "attribute: null".`);
+		return [];
+	}
+	if (handWritten.some((h) => h.propName === propName)) {
+		error(`"${propName}" has both @Prop({ serialize: 'json' }) and its own @PropSerialize() / @AttrDeserialize(). Use one or the other.`);
+		return [];
+	}
+	return [propName];
+});
+/**
+* The methods `@Prop({ serialize: 'json' })` uses, shared by every such prop in a class:
+*
+* ```ts
+* stencilSerializeJson(value) {
+*   return __stencil_Build.isServer ? JSON.stringify(value) : null;
+* }
+* stencilDeserializeJson(value, propName) {
+*   try {
+*     return JSON.parse(value);
+*   } catch {
+*     if (__stencil_Build.isDev) console.warn(...);
+*     // leave the prop as it is
+*     return __stencil_Build.isServer ? undefined : this[propName];
+*   }
+* }
+* ```
+*
+* The serializer only writes on the server, like a hand-written one should: in the browser the
+* attribute's job is done, and rewriting it on every change would be wasted work.
+* @returns the two method declarations
+*/
+const createJsonSerializerMethods = () => {
+	const f = ts$1.factory;
+	const build = (flag) => f.createPropertyAccessExpression(f.createIdentifier(BUILD_ALIAS), flag);
+	const jsonCall = (method, arg) => f.createCallExpression(f.createPropertyAccessExpression(f.createIdentifier("JSON"), method), void 0, [arg]);
+	const param = (name) => f.createParameterDeclaration(void 0, void 0, name);
+	const method = (name, params, body) => f.createMethodDeclaration(void 0, void 0, name, void 0, void 0, params.map(param), void 0, f.createBlock(body, true));
+	const serialize = method(JSON_SERIALIZE_METHOD, ["value"], [f.createReturnStatement(f.createConditionalExpression(build("isServer"), void 0, jsonCall("stringify", f.createIdentifier("value")), void 0, f.createNull()))]);
+	const warn = f.createIfStatement(build("isDev"), f.createExpressionStatement(f.createCallExpression(f.createPropertyAccessExpression(f.createIdentifier("console"), "warn"), void 0, [f.createTemplateExpression(f.createTemplateHead("The \""), [f.createTemplateSpan(f.createIdentifier("propName"), f.createTemplateMiddle(`" attribute isn't valid JSON, so the prop was left as it is: `)), f.createTemplateSpan(f.createIdentifier("value"), f.createTemplateTail(""))])])));
+	return [serialize, method(JSON_DESERIALIZE_METHOD, ["value", "propName"], [f.createTryStatement(f.createBlock([f.createReturnStatement(jsonCall("parse", f.createIdentifier("value")))], true), f.createCatchClause(void 0, f.createBlock([warn, f.createReturnStatement(f.createConditionalExpression(build("isServer"), void 0, f.createIdentifier("undefined"), void 0, f.createElementAccessExpression(f.createThis(), f.createIdentifier("propName"))))], true)), void 0)])];
+};
+/**
+* Import `Build` (as {@link BUILD_ALIAS}) from `@stencil/core`, for the generated methods. Added
+* to an existing `@stencil/core` import, which a component's source always has.
+* @param sourceFile the source file
+* @returns the source file with the import
+*/
+const addBuildImport = (sourceFile) => {
+	const f = ts$1.factory;
+	const specifier = f.createImportSpecifier(false, f.createIdentifier("Build"), f.createIdentifier(BUILD_ALIAS));
+	let added = false;
+	const statements = sourceFile.statements.map((s) => {
+		if (added || !ts$1.isImportDeclaration(s) || !ts$1.isStringLiteral(s.moduleSpecifier) || s.moduleSpecifier.text !== "@stencil/core" || !s.importClause?.namedBindings || !ts$1.isNamedImports(s.importClause.namedBindings) || s.importClause.isTypeOnly) return s;
+		added = true;
+		return f.updateImportDeclaration(s, s.modifiers, f.updateImportClause(s.importClause, false, s.importClause.name, f.updateNamedImports(s.importClause.namedBindings, [...s.importClause.namedBindings.elements, specifier])), s.moduleSpecifier, s.attributes);
+	});
+	if (!added) statements.unshift(f.createImportDeclaration(void 0, f.createImportClause(false, void 0, f.createNamedImports([specifier])), f.createStringLiteral(STENCIL_CORE_ID)));
+	return f.updateSourceFile(sourceFile, statements);
+};
+//#endregion
 //#region src/compiler/transformers/decorators-to-static/listen-decorator.ts
 const listenDecoratorsToStatic = (diagnostics, typeChecker, decoratedMembers, newMembers, decoratorName) => {
 	const listeners = decoratedMembers.filter(ts$1.isMethodDeclaration).map((method) => parseListenDecorators(diagnostics, typeChecker, method, decoratorName));
@@ -12878,7 +12977,7 @@ const isTypePromise = (typeStr) => {
 };
 const validateMethods = (diagnostics, members) => {
 	members.filter(ts$1.isMethodDeclaration).map((method) => {
-		if (method.name.getText() === "componentDidUnload") {
+		if (ts$1.isIdentifier(method.name) && method.name.text === "componentDidUnload") {
 			const err = buildError(diagnostics);
 			err.header = `Replace "componentDidUnload()" with "disconnectedCallback()"`;
 			err.messageText = `The "componentDidUnload()" method was removed in Stencil 2. Please use the "disconnectedCallback()" method instead.`;
@@ -13243,7 +13342,7 @@ const getPropertyNameText = (name) => {
 };
 //#endregion
 //#region src/compiler/transformers/decorators-to-static/serialize-decorators.ts
-const serializeDecoratorsToStatic = (typeChecker, decoratedProps, newMembers, decoratorName, translateType, propDecoratorName) => {
+const serializeDecoratorsToStatic = (typeChecker, decoratedProps, newMembers, decoratorName, translateType, propDecoratorName, generated = []) => {
 	const props = decoratedProps.filter((prop) => ts$1.isPropertyDeclaration(prop) || ts$1.isGetAccessor(prop)).flatMap((prop) => {
 		if (retrieveTsDecorators(prop)?.find(isDecoratorNamed(propDecoratorName))) {
 			const { staticName } = tsPropDeclName(prop, typeChecker);
@@ -13251,7 +13350,7 @@ const serializeDecoratorsToStatic = (typeChecker, decoratedProps, newMembers, de
 		}
 		return [];
 	});
-	const serializers = decoratedProps.filter(ts$1.isMethodDeclaration).flatMap((method) => parseSerializeDecorator(typeChecker, method, decoratorName, props));
+	const serializers = [...decoratedProps.filter(ts$1.isMethodDeclaration).flatMap((method) => parseSerializeDecorator(typeChecker, method, decoratorName, props)), ...generated];
 	if (serializers.length > 0) {
 		if (translateType === "PropSerialize") newMembers.push(createStaticGetter("serializers", convertValueToLiteral(serializers)));
 		else newMembers.push(createStaticGetter("deserializers", convertValueToLiteral(serializers)));
@@ -13351,6 +13450,8 @@ const parseWatchDecorator = (typeChecker, method, decoratorName) => {
 * @returns a TypeScript transformer factory which can be passed to
 * TypeScript to transform source code during the compilation process
 */
+/** Source files with a `@Prop({ serialize: 'json' })`, which need a `Build` import. */
+const filesWithJsonProps = /* @__PURE__ */ new WeakSet();
 const convertDecoratorsToStatic = (config, diagnostics, typeChecker, program, includeClassExpressions = false) => {
 	return (transformCtx) => {
 		let sourceFile;
@@ -13360,7 +13461,8 @@ const convertDecoratorsToStatic = (config, diagnostics, typeChecker, program, in
 		};
 		return (tsSourceFile) => {
 			sourceFile = tsSourceFile;
-			return ts$1.visitEachChild(tsSourceFile, visit, transformCtx);
+			const updated = ts$1.visitEachChild(tsSourceFile, visit, transformCtx);
+			return filesWithJsonProps.has(tsSourceFile) ? addBuildImport(updated) : updated;
 		};
 	};
 };
@@ -13398,8 +13500,20 @@ const visitClassDeclaration = (config, diagnostics, typeChecker, program, classN
 	const filteredMethodsAndFields = removeStencilMethodDecorators(Array.from(classMembers), diagnostics, importAliasMap);
 	if (componentDecorator && ts$1.isClassDeclaration(classNode)) componentDecoratorToStatic(config, typeChecker, diagnostics, classNode, filteredMethodsAndFields, componentDecorator);
 	if (decoratedMembers.length > 0) {
-		const serializers = serializeDecoratorsToStatic(typeChecker, decoratedMembers, filteredMethodsAndFields, importAliasMap.get("PropSerialize"), "PropSerialize", importAliasMap.get("Prop"));
-		const deserializers = serializeDecoratorsToStatic(typeChecker, decoratedMembers, filteredMethodsAndFields, importAliasMap.get("AttrDeserialize"), "AttrDeserialize", importAliasMap.get("Prop"));
+		const handWritten = serializeDecoratorsToStatic(typeChecker, decoratedMembers, [], importAliasMap.get("PropSerialize"), "PropSerialize", importAliasMap.get("Prop")).concat(serializeDecoratorsToStatic(typeChecker, decoratedMembers, [], importAliasMap.get("AttrDeserialize"), "AttrDeserialize", importAliasMap.get("Prop")));
+		const jsonProps = getJsonSerializedProps(diagnostics, typeChecker, decoratedMembers, importAliasMap.get("Prop"), handWritten);
+		if (jsonProps.length > 0) {
+			filteredMethodsAndFields.push(...createJsonSerializerMethods());
+			filesWithJsonProps.add(sourceFile);
+		}
+		const serializers = serializeDecoratorsToStatic(typeChecker, decoratedMembers, filteredMethodsAndFields, importAliasMap.get("PropSerialize"), "PropSerialize", importAliasMap.get("Prop"), jsonProps.map((propName) => ({
+			propName,
+			methodName: JSON_SERIALIZE_METHOD
+		})));
+		const deserializers = serializeDecoratorsToStatic(typeChecker, decoratedMembers, filteredMethodsAndFields, importAliasMap.get("AttrDeserialize"), "AttrDeserialize", importAliasMap.get("Prop"), jsonProps.map((propName) => ({
+			propName,
+			methodName: JSON_DESERIALIZE_METHOD
+		})));
 		propDecoratorsToStatic(config, diagnostics, decoratedMembers, typeChecker, program, filteredMethodsAndFields, importAliasMap.get("Prop"), serializers, deserializers);
 		stateDecoratorsToStatic(decoratedMembers, filteredMethodsAndFields, typeChecker, importAliasMap.get("State"));
 		eventDecoratorsToStatic(config, diagnostics, decoratedMembers, typeChecker, program, filteredMethodsAndFields, importAliasMap.get("Event"));
@@ -16000,9 +16114,9 @@ const updateStencilCoreImports = (updatedCoreImportPath) => {
 						}
 						if (moduleSpecifierText === "@stencil/core") {
 							if (s.importClause && s.importClause.namedBindings && s.importClause.namedBindings.kind === ts$1.SyntaxKind.NamedImports) {
-								const keepImports = s.importClause.namedBindings.elements.map((e) => e.getText()).filter((name) => KEEP_IMPORTS.has(name));
+								const keepImports = s.importClause.namedBindings.elements.filter((e) => KEEP_IMPORTS.has((e.propertyName ?? e.name).text));
 								if (keepImports.length > 0) {
-									const newImport = ts$1.factory.updateImportDeclaration(s, void 0, ts$1.factory.createImportClause(false, void 0, ts$1.factory.createNamedImports(keepImports.map((name) => ts$1.factory.createImportSpecifier(false, void 0, ts$1.factory.createIdentifier(name))))), ts$1.factory.createStringLiteral(updatedCoreImportPath), void 0);
+									const newImport = ts$1.factory.updateImportDeclaration(s, void 0, ts$1.factory.createImportClause(false, void 0, ts$1.factory.createNamedImports(keepImports.map((e) => ts$1.factory.createImportSpecifier(false, e.propertyName ? ts$1.factory.createIdentifier(e.propertyName.text) : void 0, ts$1.factory.createIdentifier(e.name.text))))), ts$1.factory.createStringLiteral(updatedCoreImportPath), void 0);
 									newStatements.push(newImport);
 								}
 							}

package/dist/compiler/index.mjs

@@ -1,3 +1,3 @@
-import { A as version, C as hasStencilHydrateImport, D as parseCssOnlyComponents, E as replaceStencilHydrateImport, M as scopeCss, O as buildId, S as hasStencilGlobalsImport, T as replaceStencilGlobalsImport, _ as cmpMetaToDocsComponent, a as createPrerenderer, b as buildHydrateCss, c as createWorkerContext, d as nodeRequire, f as optimizeCss, g as generateManifest, h as generateComponentTypesFile, i as createSystem, j as versions, k as vermoji, l as createWorkerMessageHandler, m as validateHydrated, n as transpile, o as loadConfig, p as validateConfig, r as transpileSync, s as createCompiler, t as ts, u as optimizeJs, v as getScopeId, w as replaceStencilCssComponentsImport, x as hasStencilCssComponentsImport, y as foldBuildFlags } from "../compiler-BpfMxpfR.mjs";
-import { a as LOG_LEVELS, i as CustomElementsExportBehaviorOptions } from "../node-eg7pofz5.mjs";
+import { A as version, C as hasStencilHydrateImport, D as parseCssOnlyComponents, E as replaceStencilHydrateImport, M as scopeCss, O as buildId, S as hasStencilGlobalsImport, T as replaceStencilGlobalsImport, _ as cmpMetaToDocsComponent, a as createPrerenderer, b as buildHydrateCss, c as createWorkerContext, d as nodeRequire, f as optimizeCss, g as generateManifest, h as generateComponentTypesFile, i as createSystem, j as versions, k as vermoji, l as createWorkerMessageHandler, m as validateHydrated, n as transpile, o as loadConfig, p as validateConfig, r as transpileSync, s as createCompiler, t as ts, u as optimizeJs, v as getScopeId, w as replaceStencilCssComponentsImport, x as hasStencilCssComponentsImport, y as foldBuildFlags } from "../compiler-DHNkXDvK.mjs";
+import { a as LOG_LEVELS, i as CustomElementsExportBehaviorOptions } from "../node-DwwBX_GL.mjs";
 export { CustomElementsExportBehaviorOptions, LOG_LEVELS, buildHydrateCss, buildId, cmpMetaToDocsComponent, createCompiler, createPrerenderer, createSystem, createWorkerContext, createWorkerMessageHandler, foldBuildFlags, generateComponentTypesFile, generateManifest, getScopeId, hasStencilCssComponentsImport, hasStencilGlobalsImport, hasStencilHydrateImport, loadConfig, nodeRequire, optimizeCss, optimizeJs, parseCssOnlyComponents, replaceStencilCssComponentsImport, replaceStencilGlobalsImport, replaceStencilHydrateImport, scopeCss, transpile, transpileSync, ts, validateConfig, validateHydrated, vermoji, version, versions };