@wave3d/element 0.2.2 → 0.4.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.
- package/README.md +10 -9
- package/dist/index.d.ts +4 -3
- package/dist/index.js +6 -3
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -26,15 +26,16 @@ Importing the package registers `<wave-3d>` for you:
|
|
|
26
26
|
|
|
27
27
|
## Attributes & properties
|
|
28
28
|
|
|
29
|
-
| Attribute
|
|
30
|
-
|
|
|
31
|
-
| `preset`
|
|
32
|
-
| `config`
|
|
33
|
-
| `src`
|
|
34
|
-
| `poster`
|
|
35
|
-
| `
|
|
36
|
-
| `
|
|
37
|
-
| `
|
|
29
|
+
| Attribute | What |
|
|
30
|
+
| ------------ | --------------------------------------------------------------------------------- |
|
|
31
|
+
| `preset` | a built-in preset name (lazy-loads the presets chunk) |
|
|
32
|
+
| `config` | an inline JSON config |
|
|
33
|
+
| `src` | URL to a config JSON to fetch |
|
|
34
|
+
| `poster` | poster image shown before or instead of WebGL |
|
|
35
|
+
| `poster-fit` | poster `object-fit`: `fill` (default, matches the canvas) \| `cover` \| `contain` |
|
|
36
|
+
| `paused` | pause or resume the animation |
|
|
37
|
+
| `lazy` | defer the upgrade until visible |
|
|
38
|
+
| `webgl` | `auto` \| `force` \| `off` |
|
|
38
39
|
|
|
39
40
|
There's also a `config` **property** (merged last, over the attributes) and a read-only `handle` getter. Precedence: **default → `preset` → `src` → `config` attribute → `config` property**.
|
|
40
41
|
|
package/dist/index.d.ts
CHANGED
|
@@ -4,9 +4,10 @@ import { FallbackReason, SnapshotOptions, StudioConfig, StudioConfig as StudioCo
|
|
|
4
4
|
declare const ElementBase: typeof HTMLElement;
|
|
5
5
|
/**
|
|
6
6
|
* `<wave-3d>` — the framework-agnostic drop-in (Vue/Svelte/plain HTML). Light DOM, `display:block`.
|
|
7
|
-
* Attributes: `config` (JSON), `src` (URL to a config JSON), `preset` (name), `poster`,
|
|
8
|
-
* `
|
|
9
|
-
*
|
|
7
|
+
* Attributes: `config` (JSON), `src` (URL to a config JSON), `preset` (name), `poster`,
|
|
8
|
+
* `poster-fit` (`fill` | `cover` | `contain`), `paused`, `lazy`, `webgl`. Also a `config` property
|
|
9
|
+
* and a read-only `handle` getter. Emits `wave3d-ready` (detail = renderer) and `wave3d-fallback`
|
|
10
|
+
* (detail = reason) events.
|
|
10
11
|
*/
|
|
11
12
|
declare class Wave3DElement extends ElementBase {
|
|
12
13
|
#private;
|
package/dist/index.js
CHANGED
|
@@ -5,6 +5,7 @@ const OBSERVED = [
|
|
|
5
5
|
"src",
|
|
6
6
|
"preset",
|
|
7
7
|
"poster",
|
|
8
|
+
"poster-fit",
|
|
8
9
|
"paused",
|
|
9
10
|
"lazy",
|
|
10
11
|
"webgl"
|
|
@@ -12,9 +13,10 @@ const OBSERVED = [
|
|
|
12
13
|
const ElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : function Wave3DElementBase() {};
|
|
13
14
|
/**
|
|
14
15
|
* `<wave-3d>` — the framework-agnostic drop-in (Vue/Svelte/plain HTML). Light DOM, `display:block`.
|
|
15
|
-
* Attributes: `config` (JSON), `src` (URL to a config JSON), `preset` (name), `poster`,
|
|
16
|
-
* `
|
|
17
|
-
*
|
|
16
|
+
* Attributes: `config` (JSON), `src` (URL to a config JSON), `preset` (name), `poster`,
|
|
17
|
+
* `poster-fit` (`fill` | `cover` | `contain`), `paused`, `lazy`, `webgl`. Also a `config` property
|
|
18
|
+
* and a read-only `handle` getter. Emits `wave3d-ready` (detail = renderer) and `wave3d-fallback`
|
|
19
|
+
* (detail = reason) events.
|
|
18
20
|
*/
|
|
19
21
|
var Wave3DElement = class extends ElementBase {
|
|
20
22
|
static get observedAttributes() {
|
|
@@ -55,6 +57,7 @@ var Wave3DElement = class extends ElementBase {
|
|
|
55
57
|
if (!this.isConnected) return;
|
|
56
58
|
const options = {
|
|
57
59
|
poster: this.getAttribute("poster") ?? void 0,
|
|
60
|
+
posterFit: this.getAttribute("poster-fit") ?? void 0,
|
|
58
61
|
lazy: this.#boolAttr("lazy"),
|
|
59
62
|
webgl: this.getAttribute("webgl") ?? void 0,
|
|
60
63
|
paused: this.#boolAttr("paused"),
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["#handle","#config","#scheduleUpdate","#mount","#debounce","#boolAttr","#buildConfig","#update"],"sources":["../src/index.ts"],"sourcesContent":["import { createWave } from \"@wave3d/core\";\nimport type {\n StudioConfig,\n WaveHandle,\n WaveOptions,\n WaveRenderer,\n FallbackReason,\n} from \"@wave3d/core\";\n\nconst OBSERVED = [\"config\"
|
|
1
|
+
{"version":3,"file":"index.js","names":["#handle","#config","#scheduleUpdate","#mount","#debounce","#boolAttr","#buildConfig","#update"],"sources":["../src/index.ts"],"sourcesContent":["import { createWave } from \"@wave3d/core\";\nimport type {\n StudioConfig,\n WaveHandle,\n WaveOptions,\n WaveRenderer,\n FallbackReason,\n} from \"@wave3d/core\";\n\nconst OBSERVED = [\n \"config\",\n \"src\",\n \"preset\",\n \"poster\",\n \"poster-fit\",\n \"paused\",\n \"lazy\",\n \"webgl\",\n] as const;\n\n// SSR-safe base: `class extends HTMLElement` evaluates HTMLElement at import time, which throws\n// under Node. Fall back to a dummy base there — the element is never instantiated server-side\n// (register() is guarded), so the missing DOM methods are never called.\nconst ElementBase: typeof HTMLElement =\n typeof HTMLElement !== \"undefined\"\n ? HTMLElement\n : (function Wave3DElementBase() {} as unknown as typeof HTMLElement);\n\n/**\n * `<wave-3d>` — the framework-agnostic drop-in (Vue/Svelte/plain HTML). Light DOM, `display:block`.\n * Attributes: `config` (JSON), `src` (URL to a config JSON), `preset` (name), `poster`,\n * `poster-fit` (`fill` | `cover` | `contain`), `paused`, `lazy`, `webgl`. Also a `config` property\n * and a read-only `handle` getter. Emits `wave3d-ready` (detail = renderer) and `wave3d-fallback`\n * (detail = reason) events.\n */\nexport class Wave3DElement extends ElementBase {\n static get observedAttributes(): string[] {\n return [...OBSERVED];\n }\n\n #handle: WaveHandle | null = null;\n #config: Partial<StudioConfig> = {};\n #debounce?: ReturnType<typeof setTimeout>;\n\n /** The live shell handle (null before connect / after disconnect). */\n get handle(): WaveHandle | null {\n return this.#handle;\n }\n\n /** Programmatic config, merged last (over the `preset`/`src`/`config` attributes). */\n get config(): Partial<StudioConfig> {\n return this.#config;\n }\n set config(value: Partial<StudioConfig>) {\n this.#config = value ?? {};\n this.#scheduleUpdate();\n }\n\n connectedCallback(): void {\n if (!this.style.display) this.style.display = \"block\";\n void this.#mount();\n }\n\n disconnectedCallback(): void {\n clearTimeout(this.#debounce);\n this.#handle?.destroy();\n this.#handle = null;\n }\n\n attributeChangedCallback(name: string): void {\n if (!this.#handle) return;\n if (name === \"paused\") {\n if (this.#boolAttr(\"paused\")) this.#handle.pause();\n else this.#handle.play();\n } else {\n this.#scheduleUpdate();\n }\n }\n\n async #mount(): Promise<void> {\n const config = await this.#buildConfig();\n if (!this.isConnected) return; // disconnected while the config resolved\n const options: WaveOptions = {\n poster: this.getAttribute(\"poster\") ?? undefined,\n posterFit: (this.getAttribute(\"poster-fit\") as WaveOptions[\"posterFit\"]) ?? undefined,\n lazy: this.#boolAttr(\"lazy\"),\n webgl: (this.getAttribute(\"webgl\") as WaveOptions[\"webgl\"]) ?? undefined,\n paused: this.#boolAttr(\"paused\"),\n onReady: (renderer: WaveRenderer) =>\n this.dispatchEvent(new CustomEvent(\"wave3d-ready\", { detail: renderer })),\n onFallback: (reason: FallbackReason) =>\n this.dispatchEvent(new CustomEvent(\"wave3d-fallback\", { detail: reason })),\n };\n this.#handle = createWave(this, config, options);\n }\n\n /** default ← preset ← src JSON ← config attribute ← config property. */\n async #buildConfig(): Promise<Partial<StudioConfig>> {\n let base: Partial<StudioConfig> = {};\n const presetName = this.getAttribute(\"preset\");\n if (presetName) {\n const { PRESETS } = await import(\"@wave3d/core/presets\");\n base = PRESETS[presetName]?.() ?? {};\n }\n const src = this.getAttribute(\"src\");\n if (src) {\n try {\n base = { ...base, ...(await fetch(src).then((r) => r.json())) };\n } catch {\n // ignore a failed/invalid config fetch — fall through to whatever we have\n }\n }\n base = { ...base, ...parseJson(this.getAttribute(\"config\")), ...this.#config };\n return base;\n }\n\n #scheduleUpdate(): void {\n clearTimeout(this.#debounce);\n this.#debounce = setTimeout(() => {\n void this.#update();\n }, 50);\n }\n\n async #update(): Promise<void> {\n const handle = this.#handle;\n if (!handle) return;\n handle.set(await this.#buildConfig());\n }\n\n /** Presence = true; `\"false\"`/`\"0\"` = false; absent = undefined (shell default). */\n #boolAttr(name: string): boolean | undefined {\n if (!this.hasAttribute(name)) return undefined;\n const value = this.getAttribute(name);\n return value !== \"false\" && value !== \"0\";\n }\n}\n\nfunction parseJson(json: string | null): Partial<StudioConfig> {\n if (!json) return {};\n try {\n return JSON.parse(json) as Partial<StudioConfig>;\n } catch {\n return {};\n }\n}\n\n/** Define the element (idempotent, SSR/Node-import-safe). */\nexport function register(tag = \"wave-3d\"): void {\n if (typeof window === \"undefined\" || typeof customElements === \"undefined\") return;\n if (!customElements.get(tag)) customElements.define(tag, Wave3DElement);\n}\n\n// Self-register on import so a bare `import \"@wave3d/element\"` makes <wave-3d> work. Guarded so\n// importing under Node (SSR) is a no-op rather than a ReferenceError.\nregister();\n\nexport type {\n StudioConfig,\n WaveHandle,\n WaveRenderer,\n FallbackReason,\n SnapshotOptions,\n} from \"@wave3d/core\";\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wave3d/element",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "Drop-in animated 3D gradient wave for Vue, Svelte, or plain HTML: the <wave-3d> custom element",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"background",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"access": "public"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@wave3d/core": "^0.
|
|
43
|
+
"@wave3d/core": "^0.4.1"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
|
46
46
|
"@types/three": ">=0.180",
|