@public-ui/hydrate 4.0.0-alpha.0 → 4.0.0-alpha.10

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 (6) hide show
  1. package/README.md +13 -3
  2. package/dist/index.d.ts +46 -7
  3. package/dist/index.js +16472 -10904
  4. package/dist/index.mjs +16474 -10906
  5. package/dist/package.json +12 -0
  6. package/package.json +17 -7
package/README.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # KoliBri - Hydrate-Adapter
2
2
 
3
+ [![npm](https://img.shields.io/npm/v/@public-ui/hydrate)](https://www.npmjs.com/package/@public-ui/components)
4
+ [![license](https://img.shields.io/npm/l/@public-ui/hydrate)](https://github.com/public-ui/kolibri/blob/main/LICENSE)
5
+ [![downloads](https://img.shields.io/npm/dt/@public-ui/hydrate)](https://www.npmjs.com/package/@public-ui/hydrate)
6
+ [![issues](https://img.shields.io/github/issues/public-ui/kolibri)](https://github.com/public-ui/kolibri/issues)
7
+ [![pull requests](https://img.shields.io/github/issues-pr/public-ui/kolibri)](https://github.com/public-ui/kolibri/pulls)
8
+ [![size](https://img.shields.io/bundlephobia/min/@public-ui/hydrate)](https://bundlephobia.com/result?p=@public-ui/hydrate)
9
+ ![contributors](https://img.shields.io/github/contributors/public-ui/kolibri)
10
+
3
11
  ## Motivation
4
12
 
5
13
  Provide an adapter for Server Side Rendering of KoliBri components.
@@ -11,9 +19,9 @@ Provide an adapter for Server Side Rendering of KoliBri components.
11
19
  You can install the adapter with `npm`, `pnpm` or `yarn`:
12
20
 
13
21
  ```bash
14
- npm i -g @public-ui/hydrate
15
- pnpm i -g @public-ui/hydrate
16
- yarn add -g @public-ui/hydrate
22
+ npm i @public-ui/hydrate
23
+ pnpm i @public-ui/hydrate
24
+ yarn add @public-ui/hydrate
17
25
  ```
18
26
 
19
27
  ## Usage
@@ -27,3 +35,5 @@ import { renderToString } from '@public-ui/hydrate';
27
35
  const inputHtml = `<kol-button _label="Hello World"_></kol-button>`;
28
36
  const { html } = await renderToString(inputHtml);
29
37
  ```
38
+
39
+ Refer to the [default theme README](../../themes/default/README.md) for information on customizing the output.
package/dist/index.d.ts CHANGED
@@ -3,6 +3,21 @@
3
3
  import { Readable } from 'node:stream';
4
4
 
5
5
  export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
6
+ /**
7
+ * Serialize a value to a string that can be deserialized later.
8
+ * @param {unknown} value - The value to serialize.
9
+ * @returns {string} A string that can be deserialized later.
10
+ * @deprecated will be removed in v5. Use `@PropSerialize()` decorator instead.
11
+ */
12
+ export declare function serializeProperty(value: unknown): string | number | boolean;
13
+ /**
14
+ * Deserialize a value from a string that was serialized earlier.
15
+ * @param {string} value - The string to deserialize.
16
+ * @returns {unknown} The deserialized value.
17
+ * @deprecated will be removed in v5. Use `@AttrDeserialize()` decorator instead.
18
+ */
19
+ export declare function deserializeProperty(value: string): any;
20
+ export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
6
21
  export interface HydrateDocumentOptions {
7
22
  /**
8
23
  * Build ID that will be added to `<html data-stencil-build="BUILD_ID">`. By default
@@ -94,6 +109,30 @@ export interface HydrateDocumentOptions {
94
109
  * Sets `navigator.userAgent`
95
110
  */
96
111
  userAgent?: string;
112
+ /**
113
+ * Configure how Stencil serializes the components shadow root.
114
+ * - If set to `declarative-shadow-dom` the component will be rendered within a Declarative Shadow DOM.
115
+ * - If set to `scoped` Stencil will render the contents of the shadow root as a `scoped: true` component
116
+ * and the shadow DOM will be created during client-side hydration.
117
+ * - Alternatively you can mix and match the two by providing an object with `declarative-shadow-dom` and `scoped` keys,
118
+ * the value arrays containing the tag names of the components that should be rendered in that mode.
119
+ *
120
+ * Examples:
121
+ * - `{ 'declarative-shadow-dom': ['my-component-1', 'another-component'], default: 'scoped' }`
122
+ * Render all components as `scoped` apart from `my-component-1` and `another-component`
123
+ * - `{ 'scoped': ['an-option-component'], default: 'declarative-shadow-dom' }`
124
+ * Render all components within `declarative-shadow-dom` apart from `an-option-component`
125
+ * - `'scoped'` Render all components as `scoped`
126
+ * - `false` disables shadow root serialization
127
+ *
128
+ * *NOTE* `true` has been deprecated in favor of `declarative-shadow-dom` and `scoped`
129
+ * @default 'declarative-shadow-dom'
130
+ */
131
+ serializeShadowRoot?: "declarative-shadow-dom" | "scoped" | {
132
+ "declarative-shadow-dom"?: string[];
133
+ scoped?: string[];
134
+ default: "declarative-shadow-dom" | "scoped";
135
+ } | boolean;
97
136
  }
98
137
  export interface SerializeDocumentOptions extends HydrateDocumentOptions {
99
138
  /**
@@ -136,19 +175,17 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
136
175
  * Remove HTML comments. Defaults to `true`.
137
176
  */
138
177
  removeHtmlComments?: boolean;
139
- /**
140
- * If set to `false` Stencil will ignore the fact that a component has a `shadow: true`
141
- * flag and serializes it as a scoped component. If set to `true` the component will
142
- * be rendered within a Declarative Shadow DOM.
143
- * @default false
144
- */
145
- serializeShadowRoot?: boolean;
146
178
  /**
147
179
  * The `fullDocument` flag determines the format of the rendered output. Set it to true to
148
180
  * generate a complete HTML document, or false to render only the component.
149
181
  * @default true
150
182
  */
151
183
  fullDocument?: boolean;
184
+ /**
185
+ * Style modes to render the component in.
186
+ * @see https://stenciljs.com/docs/styling#style-modes
187
+ */
188
+ modes?: ResolutionHandler[];
152
189
  }
153
190
  export interface HydrateFactoryOptions extends SerializeDocumentOptions {
154
191
  serializeToHtml: boolean;
@@ -219,7 +256,9 @@ export interface HydrateScriptElement extends HydrateElement {
219
256
  type?: string;
220
257
  }
221
258
  export interface HydrateStyleElement extends HydrateElement {
259
+ id?: string;
222
260
  href?: string;
261
+ content?: string;
223
262
  }
224
263
  export interface HydrateStaticData {
225
264
  id: string;