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

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 +44 -7
  3. package/dist/index.js +15815 -10682
  4. package/dist/index.mjs +15813 -10680
  5. package/dist/package.json +12 -0
  6. package/package.json +3 -3
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,19 @@
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
+ */
11
+ export declare function serializeProperty(value: unknown): string | number | boolean;
12
+ /**
13
+ * Deserialize a value from a string that was serialized earlier.
14
+ * @param {string} value - The string to deserialize.
15
+ * @returns {unknown} The deserialized value.
16
+ */
17
+ export declare function deserializeProperty(value: string): any;
18
+ export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
6
19
  export interface HydrateDocumentOptions {
7
20
  /**
8
21
  * Build ID that will be added to `<html data-stencil-build="BUILD_ID">`. By default
@@ -94,6 +107,30 @@ export interface HydrateDocumentOptions {
94
107
  * Sets `navigator.userAgent`
95
108
  */
96
109
  userAgent?: string;
110
+ /**
111
+ * Configure how Stencil serializes the components shadow root.
112
+ * - If set to `declarative-shadow-dom` the component will be rendered within a Declarative Shadow DOM.
113
+ * - If set to `scoped` Stencil will render the contents of the shadow root as a `scoped: true` component
114
+ * and the shadow DOM will be created during client-side hydration.
115
+ * - Alternatively you can mix and match the two by providing an object with `declarative-shadow-dom` and `scoped` keys,
116
+ * the value arrays containing the tag names of the components that should be rendered in that mode.
117
+ *
118
+ * Examples:
119
+ * - `{ 'declarative-shadow-dom': ['my-component-1', 'another-component'], default: 'scoped' }`
120
+ * Render all components as `scoped` apart from `my-component-1` and `another-component`
121
+ * - `{ 'scoped': ['an-option-component'], default: 'declarative-shadow-dom' }`
122
+ * Render all components within `declarative-shadow-dom` apart from `an-option-component`
123
+ * - `'scoped'` Render all components as `scoped`
124
+ * - `false` disables shadow root serialization
125
+ *
126
+ * *NOTE* `true` has been deprecated in favor of `declarative-shadow-dom` and `scoped`
127
+ * @default 'declarative-shadow-dom'
128
+ */
129
+ serializeShadowRoot?: "declarative-shadow-dom" | "scoped" | {
130
+ "declarative-shadow-dom"?: string[];
131
+ scoped?: string[];
132
+ default: "declarative-shadow-dom" | "scoped";
133
+ } | boolean;
97
134
  }
98
135
  export interface SerializeDocumentOptions extends HydrateDocumentOptions {
99
136
  /**
@@ -136,19 +173,17 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
136
173
  * Remove HTML comments. Defaults to `true`.
137
174
  */
138
175
  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
176
  /**
147
177
  * The `fullDocument` flag determines the format of the rendered output. Set it to true to
148
178
  * generate a complete HTML document, or false to render only the component.
149
179
  * @default true
150
180
  */
151
181
  fullDocument?: boolean;
182
+ /**
183
+ * Style modes to render the component in.
184
+ * @see https://stenciljs.com/docs/styling#style-modes
185
+ */
186
+ modes?: ResolutionHandler[];
152
187
  }
153
188
  export interface HydrateFactoryOptions extends SerializeDocumentOptions {
154
189
  serializeToHtml: boolean;
@@ -219,7 +254,9 @@ export interface HydrateScriptElement extends HydrateElement {
219
254
  type?: string;
220
255
  }
221
256
  export interface HydrateStyleElement extends HydrateElement {
257
+ id?: string;
222
258
  href?: string;
259
+ content?: string;
223
260
  }
224
261
  export interface HydrateStaticData {
225
262
  id: string;