@ssingh465/recipe-ui 0.1.0 → 0.1.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.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as i,Host as n,transformTag as o}from"@stencil/core/internal/client";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.spikeaction=s(this,"spikeaction",7)}note;spikeaction;handleClick=()=>{this.spikeaction.emit(this.note??{from:"spike-panel",message:"no note received"})};render(){return i(n,{key:"20fa323bdd4990a5d568faf938af5bd0dcc6f17e"},i("p",{key:"11ecacb2350267443654583ada8a2a1c690f2eba"},this.note?`From ${this.note.from}: ${this.note.message}`:"Waiting for an object property..."),i("button",{key:"73f45b59b24692f0078102448add5f41aab4e715",type:"button",onClick:this.handleClick},"Emit spikeaction"),i("div",{key:"0ee7ada21cd3ed839febff7974273d56787e990d",class:"slot-wrap"},i("slot",{key:"5f70bf5e007f214213efdc3e69db84db747d9f8a"})))}static get style(){return":host{display:block;border:1px solid #ccc;border-radius:8px;padding:1rem;font-family:system-ui, sans-serif}button{cursor:pointer}.slot-wrap{margin-top:0.75rem}"}},[769,"spike-panel",{note:[16]}]),r=a,c=function(){"undefined"!=typeof customElements&&["spike-panel"].forEach((e=>{"spike-panel"===e&&(customElements.get(o(e))||customElements.define(o(e),a))}))};export{r as SpikePanel,c as defineCustomElement}
|
|
@@ -4,14 +4,14 @@ export interface SpikeNote {
|
|
|
4
4
|
message: string;
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
7
|
+
* Integration spike only. Proves the Stencil <-> SvelteKit seam (object
|
|
8
|
+
* property, custom event, slot) end to end. Not part of the real component
|
|
9
|
+
* set to come.
|
|
10
10
|
*/
|
|
11
11
|
export declare class SpikePanel {
|
|
12
|
-
/** Arrives as an object property once the element has upgraded
|
|
12
|
+
/** Arrives as an object property once the element has upgraded. */
|
|
13
13
|
note?: SpikeNote;
|
|
14
|
-
/** Lowercase
|
|
14
|
+
/** Lowercase, so it binds as a plain Svelte `on*` attribute. */
|
|
15
15
|
spikeaction: EventEmitter<SpikeNote>;
|
|
16
16
|
private handleClick;
|
|
17
17
|
render(): any;
|
|
@@ -9,13 +9,13 @@ import { SpikeNote } from "./components/spike-panel/spike-panel";
|
|
|
9
9
|
export { SpikeNote } from "./components/spike-panel/spike-panel";
|
|
10
10
|
export namespace Components {
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
12
|
+
* Integration spike only. Proves the Stencil <-> SvelteKit seam (object
|
|
13
|
+
* property, custom event, slot) end to end. Not part of the real component
|
|
14
|
+
* set to come.
|
|
15
15
|
*/
|
|
16
16
|
interface SpikePanel {
|
|
17
17
|
/**
|
|
18
|
-
* Arrives as an object property once the element has upgraded
|
|
18
|
+
* Arrives as an object property once the element has upgraded.
|
|
19
19
|
*/
|
|
20
20
|
"note"?: SpikeNote;
|
|
21
21
|
}
|
|
@@ -29,9 +29,9 @@ declare global {
|
|
|
29
29
|
"spikeaction": SpikeNote;
|
|
30
30
|
}
|
|
31
31
|
/**
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
32
|
+
* Integration spike only. Proves the Stencil <-> SvelteKit seam (object
|
|
33
|
+
* property, custom event, slot) end to end. Not part of the real component
|
|
34
|
+
* set to come.
|
|
35
35
|
*/
|
|
36
36
|
interface HTMLSpikePanelElement extends Components.SpikePanel, HTMLStencilElement {
|
|
37
37
|
addEventListener<K extends keyof HTMLSpikePanelElementEventMap>(type: K, listener: (this: HTMLSpikePanelElement, ev: SpikePanelCustomEvent<HTMLSpikePanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -53,17 +53,17 @@ declare global {
|
|
|
53
53
|
}
|
|
54
54
|
declare namespace LocalJSX {
|
|
55
55
|
/**
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
56
|
+
* Integration spike only. Proves the Stencil <-> SvelteKit seam (object
|
|
57
|
+
* property, custom event, slot) end to end. Not part of the real component
|
|
58
|
+
* set to come.
|
|
59
59
|
*/
|
|
60
60
|
interface SpikePanel {
|
|
61
61
|
/**
|
|
62
|
-
* Arrives as an object property once the element has upgraded
|
|
62
|
+
* Arrives as an object property once the element has upgraded.
|
|
63
63
|
*/
|
|
64
64
|
"note"?: SpikeNote;
|
|
65
65
|
/**
|
|
66
|
-
* Lowercase
|
|
66
|
+
* Lowercase, so it binds as a plain Svelte `on*` attribute.
|
|
67
67
|
*/
|
|
68
68
|
"onSpikeaction"?: (event: SpikePanelCustomEvent<SpikeNote>) => void;
|
|
69
69
|
}
|
|
@@ -76,9 +76,9 @@ declare module "@stencil/core" {
|
|
|
76
76
|
export namespace JSX {
|
|
77
77
|
interface IntrinsicElements {
|
|
78
78
|
/**
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
79
|
+
* Integration spike only. Proves the Stencil <-> SvelteKit seam (object
|
|
80
|
+
* property, custom event, slot) end to end. Not part of the real component
|
|
81
|
+
* set to come.
|
|
82
82
|
*/
|
|
83
83
|
"spike-panel": LocalJSX.IntrinsicElements["spike-panel"] & JSXBase.HTMLAttributes<HTMLSpikePanelElement>;
|
|
84
84
|
}
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
# @ssingh465/recipe-ui
|
|
2
|
-
|
|
3
|
-
Stencil web component library for the **Recipe Finder & Meal Planner** app. Published to npm
|
|
4
|
-
and consumed by `../app` as a registry dependency — never linked from source
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
npm
|
|
11
|
-
npm
|
|
12
|
-
npm
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
1
|
+
# @ssingh465/recipe-ui
|
|
2
|
+
|
|
3
|
+
Stencil web component library for the **Recipe Finder & Meal Planner** app. Published to npm
|
|
4
|
+
and consumed by `../app` as a registry dependency — never linked from source.
|
|
5
|
+
|
|
6
|
+
## Local development
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install
|
|
10
|
+
npm start # dev server with live reload, http://localhost:3333
|
|
11
|
+
npm run build # production build -> dist/
|
|
12
|
+
npm test # Stencil/Vitest spec tests
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Consuming this package
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm i @ssingh465/recipe-ui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
// app/src/hooks.client.ts
|
|
23
|
+
import { defineCustomElements } from '@ssingh465/recipe-ui/components';
|
|
24
|
+
defineCustomElements();
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Register once, client-side only, before any consumer renders.
|
|
28
|
+
|
|
29
|
+
## Status
|
|
30
|
+
|
|
31
|
+
Currently ships a single throwaway component, `<spike-panel>`, that proves the publish →
|
|
32
|
+
install → render → event → slot pipeline end to end. The real component set (`recipe-card`,
|
|
33
|
+
`recipe-grid`, `filter-chip`, `day-picker`, `planner-day`, `empty-state`, `skeleton-card`) is
|
|
34
|
+
still to come.
|