@inkweave/react 1.0.0 → 1.1.0
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/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +46 -44
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var x=Object.defineProperty;var j=(e,t,n)=>t in e?x(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var C=(e,t,n)=>j(e,typeof t!="symbol"?t+"":t,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("react"),u=require("@inkweave/core"),p=c.createContext(null),h=()=>{const e=c.useContext(p);if(!e)throw new Error("useStory must be used within StoryProvider");return e},v=({ink:e,children:t})=>o.jsx(p.Provider,{value:e,children:t}),w=({ink:e,children:t,className:n="",onInit:l})=>{const s=c.useRef(l);s.current=l;const a=u.contentsStore(r=>r.refreshKey);return c.useEffect(()=>{var r;e.restart(),(r=s.current)==null||r.call(s,e)},[e]),o.jsx(v,{ink:e,children:o.jsx("div",{id:"inkweave-story",className:n,children:t},a)})},f=c.memo(w),g=({lineDelay:e=.05,className:t=""})=>{const n=h(),l=u.contentsStore(r=>r.contents),s=n,a=(s==null?void 0:s.visibleLines)!=null?s.visibleLines:l.length;return o.jsx("section",{id:"inkweave-contents",children:l.map((r,i)=>{const d={"--delay":`${(i>a?i-a:0)*e}s`},m=r===u.CHOICE_SEPARATOR,y=m?`divider_${i}`:`line_${i}_${r.slice(0,20)}`;return m?o.jsx("div",{style:d,children:o.jsx("hr",{className:"inkweave-divider"})},y):o.jsx("div",{style:d,children:o.jsx("p",{className:t,children:r})},y)})})},k=c.memo(g);class _{constructor(){C(this,"_components",new Map)}get(t){return this._components.get(t)}register(t,n){this._components.set(t,n)}unregister(t){this._components.delete(t)}clear(){this._components.clear()}has(t){return this._components.has(t)}}const b=new _,S=c.memo(({choice:e,index:t,onClick:n,className:l})=>{const s=c.useCallback(()=>{e.type!=="unclickable"&&n(e.index)},[e.index,e.type,n]),a=b.get(e.type);return a?o.jsx("li",{style:{"--index":t},children:c.createElement(a,{onClick:s,className:l,val:e.val,children:e.text})}):o.jsx("li",{style:{"--index":t},children:o.jsx("a",{onClick:s,className:`${l} ${e.type==="unclickable"?"disabled":""}`,"aria-disabled":e.type==="unclickable",children:e.text})})});S.displayName="ChoiceItem";const P=({onClick:e,className:t="inkweave-btn"})=>{const n=h(),l=u.choicesStore(i=>i.choices),s=n,a=s&&"choicesCanShow"in s?s.choicesCanShow:!0,r=c.useCallback(i=>{e==null||e(i),n.choose(i)},[n,e]);return o.jsx("ul",{id:"inkweave-choices",style:{visibility:a?"visible":"hidden"},children:l.map((i,d)=>o.jsx(S,{choice:i,index:d,onClick:r,className:t},i.index))},a.toString())},O=c.memo(P);Object.defineProperty(exports,"useChoices",{enumerable:!0,get:()=>u.choicesStore});Object.defineProperty(exports,"useContents",{enumerable:!0,get:()=>u.contentsStore});Object.defineProperty(exports,"useVariables",{enumerable:!0,get:()=>u.variablesStore});exports.ChoiceComponents=b;exports.Choices=O;exports.Contents=k;exports.Story=f;exports.StoryProvider=v;exports.useStory=h;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/components/Story.tsx","../src/components/Contents.tsx","../src/components/ChoiceComponents.ts","../src/components/Choices.tsx"],"sourcesContent":["import { memo, useEffect, useRef, createContext, useContext } from 'react';\nimport type
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/components/Story.tsx","../src/components/Contents.tsx","../src/components/ChoiceComponents.ts","../src/components/Choices.tsx"],"sourcesContent":["import { memo, useEffect, useRef, createContext, useContext } from 'react';\nimport { contentsStore, type InkStory } from '@inkweave/core';\n\nconst StoryContext = createContext<InkStory | null>(null);\n\nexport const useStory = () => {\n\tconst ink = useContext(StoryContext);\n\tif (!ink) {\n\t\tthrow new Error('useStory must be used within StoryProvider');\n\t}\n\treturn ink;\n};\n\ninterface StoryProviderProps {\n\tink: InkStory;\n\tchildren: React.ReactNode;\n}\n\nexport const StoryProvider: React.FC<StoryProviderProps> = ({\n\tink,\n\tchildren,\n}) => {\n\treturn (\n\t\t<StoryContext.Provider value={ink}>\n\t\t\t{children}\n\t\t</StoryContext.Provider>\n\t);\n};\n\ninterface StoryProps {\n\tink: InkStory;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tonInit?: (ink: InkStory) => void;\n}\n\nconst StoryComponent: React.FC<StoryProps> = ({\n\tink,\n\tchildren,\n\tclassName = '',\n\tonInit,\n}) => {\n\tconst onInitRef = useRef(onInit);\n\tonInitRef.current = onInit;\n\tconst refreshKey = contentsStore((state) => state.refreshKey);\n\n\tuseEffect(() => {\n\t\tink.restart();\n\t\tonInitRef.current?.(ink);\n\t}, [ink]);\n\n\treturn (\n\t\t<StoryProvider ink={ink}>\n\t\t\t<div id=\"inkweave-story\" className={className} key={refreshKey}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</StoryProvider>\n\t);\n};\n\nexport default memo(StoryComponent);","import { memo, CSSProperties } from 'react';\nimport { CHOICE_SEPARATOR, contentsStore } from '@inkweave/core';\nimport { useStory } from './Story';\n\ninterface ContentsProps {\n\tlineDelay?: number;\n\tclassName?: string;\n}\n\nconst ContentsComponent: React.FC<ContentsProps> = ({\n\tlineDelay = 0.05,\n\tclassName = '',\n}) => {\n\tconst ink = useStory();\n\tconst contents = contentsStore((state) => state.contents);\n\tconst inkRecord = ink as unknown as Record<string, unknown>;\n\tconst visibleLines =\n\t\tinkRecord?.visibleLines != undefined\n\t\t\t? (inkRecord.visibleLines as number)\n\t\t\t: contents.length;\n\n\treturn (\n\t\t<section id=\"inkweave-contents\">\n\t\t\t{contents.map((item: string, i: number) => {\n\t\t\t\tconst style: CSSProperties = {\n\t\t\t\t\t'--delay': `${\n\t\t\t\t\t\t(i > visibleLines ? i - visibleLines : 0) * lineDelay\n\t\t\t\t\t}s`,\n\t\t\t\t} as CSSProperties & { '--delay': string };\n\n\t\t\t\tconst isDivider = item === CHOICE_SEPARATOR;\n\t\t\t\tconst key = isDivider ? `divider_${i}` : `line_${i}_${item.slice(0, 20)}`;\n\n\t\t\t\tif (isDivider) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={key} style={style}>\n\t\t\t\t\t\t\t<hr className=\"inkweave-divider\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={key} style={style}>\n\t\t\t\t\t\t<p className={className}>{item}</p>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</section>\n\t);\n};\n\nexport default memo(ContentsComponent);","import type { FC } from 'react';\n\nexport interface ChoiceComponentProps {\n\tval?: string;\n\tonClick: () => void;\n\tclassName?: string;\n\tchildren?: React.ReactNode;\n}\n\ntype ChoiceComponent = FC<ChoiceComponentProps>;\n\nclass ChoiceComponentsClass {\n\tprivate _components: Map<string, ChoiceComponent> = new Map();\n\n\tget(type: string): ChoiceComponent | undefined {\n\t\treturn this._components.get(type);\n\t}\n\n\tregister(type: string, component: ChoiceComponent) {\n\t\tthis._components.set(type, component);\n\t}\n\n\tunregister(type: string) {\n\t\tthis._components.delete(type);\n\t}\n\n\tclear() {\n\t\tthis._components.clear();\n\t}\n\n\thas(type: string): boolean {\n\t\treturn this._components.has(type);\n\t}\n}\n\nexport const ChoiceComponents = new ChoiceComponentsClass();","import { memo, createElement, useCallback } from 'react';\nimport { Choice, choicesStore } from '@inkweave/core';\nimport { useStory } from './Story';\nimport { ChoiceComponents } from './ChoiceComponents';\n\ninterface ChoiceItemProps {\n\tchoice: Choice;\n\tindex: number;\n\tonClick: (index: number) => void;\n\tclassName: string;\n}\n\nconst ChoiceItem: React.FC<ChoiceItemProps> = memo(({ choice, index, onClick, className }) => {\n\tconst handleClick = useCallback(() => {\n\t\tif (choice.type !== 'unclickable') {\n\t\t\tonClick(choice.index);\n\t\t}\n\t}, [choice.index, choice.type, onClick]);\n\n\tconst Component = ChoiceComponents.get(choice.type);\n\tif (Component) {\n\t\treturn (\n\t\t\t<li style={{ '--index': index } as React.CSSProperties}>\n\t\t\t\t{createElement(Component, {\n\t\t\t\t\tonClick: handleClick,\n\t\t\t\t\tclassName,\n\t\t\t\t\tval: choice.val,\n\t\t\t\t\tchildren: choice.text,\n\t\t\t\t})}\n\t\t\t</li>\n\t\t);\n\t}\n\n\treturn (\n\t\t<li style={{ '--index': index } as React.CSSProperties}>\n\t\t\t<a\n\t\t\t\tonClick={handleClick}\n\t\t\t\tclassName={`${className} ${choice.type === 'unclickable' ? 'disabled' : ''}`}\n\t\t\t\taria-disabled={choice.type === 'unclickable'}\n\t\t\t>\n\t\t\t\t{choice.text}\n\t\t\t</a>\n\t\t</li>\n\t);\n});\nChoiceItem.displayName = 'ChoiceItem';\n\ninterface ChoicesProps {\n\tonClick?: (index: number) => void;\n\tclassName?: string;\n}\n\nconst ChoicesComponent: React.FC<ChoicesProps> = ({\n\tonClick,\n\tclassName = 'inkweave-btn',\n}) => {\n\tconst ink = useStory();\n\tconst choices = choicesStore((state) => state.choices);\n\tconst inkRecord = ink as unknown as Record<string, unknown>;\n\tconst canShow =\n\t\tinkRecord && 'choicesCanShow' in inkRecord\n\t\t\t? (inkRecord.choicesCanShow as boolean)\n\t\t\t: true;\n\n\tconst handleClick = useCallback((index: number) => {\n\t\tonClick?.(index);\n\t\tink.choose(index);\n\t}, [ink, onClick]);\n\n\treturn (\n\t\t<ul\n\t\t\tid=\"inkweave-choices\"\n\t\t\tkey={canShow.toString()}\n\t\t\tstyle={{ visibility: canShow ? 'visible' : 'hidden' }}\n\t\t>\n\t\t\t{choices.map((choice: Choice, index: number) => (\n\t\t\t\t<ChoiceItem\n\t\t\t\t\tkey={choice.index}\n\t\t\t\t\tchoice={choice}\n\t\t\t\t\tindex={index}\n\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\tclassName={className}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</ul>\n\t);\n};\n\nexport default memo(ChoicesComponent);"],"names":["StoryContext","createContext","useStory","ink","useContext","StoryProvider","children","StoryComponent","className","onInit","onInitRef","useRef","refreshKey","contentsStore","state","useEffect","_a","jsx","Story","memo","ContentsComponent","lineDelay","contents","inkRecord","visibleLines","item","style","isDivider","CHOICE_SEPARATOR","key","Contents","ChoiceComponentsClass","__publicField","type","component","ChoiceComponents","ChoiceItem","choice","index","onClick","handleClick","useCallback","Component","ChoicesComponent","choices","choicesStore","canShow","Choices"],"mappings":"wUAGMA,EAAeC,EAAAA,cAA+B,IAAI,EAE3CC,EAAW,IAAM,CAC7B,MAAMC,EAAMC,EAAAA,WAAWJ,CAAY,EACnC,GAAI,CAACG,EACJ,MAAM,IAAI,MAAM,4CAA4C,EAE7D,OAAOA,CACR,EAOaE,EAA8C,CAAC,CAC3D,IAAAF,EACA,SAAAG,CACD,UAEGN,EAAa,SAAb,CAAsB,MAAOG,EAC5B,SAAAG,EACF,EAWIC,EAAuC,CAAC,CAC7C,IAAAJ,EACA,SAAAG,EACA,UAAAE,EAAY,GACZ,OAAAC,CACD,IAAM,CACL,MAAMC,EAAYC,EAAAA,OAAOF,CAAM,EAC/BC,EAAU,QAAUD,EACpB,MAAMG,EAAaC,EAAAA,cAAeC,GAAUA,EAAM,UAAU,EAE5DC,OAAAA,EAAAA,UAAU,IAAM,OACfZ,EAAI,QAAA,GACJa,EAAAN,EAAU,UAAV,MAAAM,EAAA,KAAAN,EAAoBP,EACrB,EAAG,CAACA,CAAG,CAAC,EAGPc,EAAAA,IAACZ,EAAA,CAAc,IAAAF,EACd,SAAAc,EAAAA,IAAC,MAAA,CAAI,GAAG,iBAAiB,UAAAT,EACvB,SAAAF,CAAA,EADkDM,CAEpD,CAAA,CACD,CAEF,EAEAM,EAAeC,EAAAA,KAAKZ,CAAc,ECnD5Ba,EAA6C,CAAC,CACnD,UAAAC,EAAY,IACZ,UAAAb,EAAY,EACb,IAAM,CACL,MAAML,EAAMD,EAAA,EACNoB,EAAWT,EAAAA,cAAeC,GAAUA,EAAM,QAAQ,EAClDS,EAAYpB,EACZqB,GACLD,GAAA,YAAAA,EAAW,eAAgB,KACvBA,EAAU,aACXD,EAAS,OAEb,OACCL,MAAC,WAAQ,GAAG,oBACV,WAAS,IAAI,CAACQ,EAAc,IAAc,CAC1C,MAAMC,EAAuB,CAC5B,UAAW,IACT,EAAIF,EAAe,EAAIA,EAAe,GAAKH,CAC7C,GAAA,EAGKM,EAAYF,IAASG,EAAAA,iBACrBC,EAAMF,EAAY,WAAW,CAAC,GAAK,QAAQ,CAAC,IAAIF,EAAK,MAAM,EAAG,EAAE,CAAC,GAEvE,OAAIE,EAEFV,MAAC,OAAc,MAAAS,EACd,SAAAT,EAAAA,IAAC,MAAG,UAAU,mBAAmB,GADxBY,CAEV,EAKDZ,EAAAA,IAAC,OAAc,MAAAS,EACd,SAAAT,EAAAA,IAAC,KAAE,UAAAT,EAAuB,SAAAiB,CAAA,CAAK,GADtBI,CAEV,CAEF,CAAC,CAAA,CACF,CAEF,EAEAC,EAAeX,EAAAA,KAAKC,CAAiB,ECxCrC,MAAMW,CAAsB,CAA5B,cACSC,EAAA,uBAAgD,KAExD,IAAIC,EAA2C,CAC9C,OAAO,KAAK,YAAY,IAAIA,CAAI,CACjC,CAEA,SAASA,EAAcC,EAA4B,CAClD,KAAK,YAAY,IAAID,EAAMC,CAAS,CACrC,CAEA,WAAWD,EAAc,CACxB,KAAK,YAAY,OAAOA,CAAI,CAC7B,CAEA,OAAQ,CACP,KAAK,YAAY,MAAA,CAClB,CAEA,IAAIA,EAAuB,CAC1B,OAAO,KAAK,YAAY,IAAIA,CAAI,CACjC,CACD,CAEO,MAAME,EAAmB,IAAIJ,ECvB9BK,EAAwCjB,EAAAA,KAAK,CAAC,CAAE,OAAAkB,EAAQ,MAAAC,EAAO,QAAAC,EAAS,UAAA/B,KAAgB,CAC7F,MAAMgC,EAAcC,EAAAA,YAAY,IAAM,CACjCJ,EAAO,OAAS,eACnBE,EAAQF,EAAO,KAAK,CAEtB,EAAG,CAACA,EAAO,MAAOA,EAAO,KAAME,CAAO,CAAC,EAEjCG,EAAYP,EAAiB,IAAIE,EAAO,IAAI,EAClD,OAAIK,EAEFzB,EAAAA,IAAC,MAAG,MAAO,CAAE,UAAWqB,GACtB,yBAAcI,EAAW,CACzB,QAASF,EACT,UAAAhC,EACA,IAAK6B,EAAO,IACZ,SAAUA,EAAO,IAAA,CACjB,EACF,QAKA,KAAA,CAAG,MAAO,CAAE,UAAWC,GACvB,SAAArB,EAAAA,IAAC,IAAA,CACA,QAASuB,EACT,UAAW,GAAGhC,CAAS,IAAI6B,EAAO,OAAS,cAAgB,WAAa,EAAE,GAC1E,gBAAeA,EAAO,OAAS,cAE9B,SAAAA,EAAO,IAAA,CAAA,EAEV,CAEF,CAAC,EACDD,EAAW,YAAc,aAOzB,MAAMO,EAA2C,CAAC,CACjD,QAAAJ,EACA,UAAA/B,EAAY,cACb,IAAM,CACL,MAAML,EAAMD,EAAA,EACN0C,EAAUC,EAAAA,aAAc/B,GAAUA,EAAM,OAAO,EAC/CS,EAAYpB,EACZ2C,EACLvB,GAAa,mBAAoBA,EAC7BA,EAAU,eACX,GAEEiB,EAAcC,cAAaH,GAAkB,CAClDC,GAAA,MAAAA,EAAUD,GACVnC,EAAI,OAAOmC,CAAK,CACjB,EAAG,CAACnC,EAAKoC,CAAO,CAAC,EAEjB,OACCtB,EAAAA,IAAC,KAAA,CACA,GAAG,mBAEH,MAAO,CAAE,WAAY6B,EAAU,UAAY,QAAA,EAE1C,SAAAF,EAAQ,IAAI,CAACP,EAAgBC,IAC7BrB,EAAAA,IAACmB,EAAA,CAEA,OAAAC,EACA,MAAAC,EACA,QAASE,EACT,UAAAhC,CAAA,EAJK6B,EAAO,KAAA,CAMb,CAAA,EAXIS,EAAQ,SAAA,CAAS,CAczB,EAEAC,EAAe5B,EAAAA,KAAKwB,CAAgB"}
|
package/dist/index.js
CHANGED
|
@@ -1,42 +1,44 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var m = (e, t, n) =>
|
|
1
|
+
var b = Object.defineProperty;
|
|
2
|
+
var w = (e, t, n) => t in e ? b(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
|
|
3
|
+
var m = (e, t, n) => w(e, typeof t != "symbol" ? t + "" : t, n);
|
|
4
4
|
import { jsx as o } from "react/jsx-runtime";
|
|
5
|
-
import { createContext as
|
|
6
|
-
import { contentsStore as
|
|
7
|
-
import { choicesStore as
|
|
8
|
-
const
|
|
9
|
-
const e =
|
|
5
|
+
import { createContext as f, memo as d, useRef as x, useEffect as _, useContext as k, useCallback as p, createElement as g } from "react";
|
|
6
|
+
import { contentsStore as v, CHOICE_SEPARATOR as $, choicesStore as E } from "@inkweave/core";
|
|
7
|
+
import { choicesStore as z, contentsStore as B, variablesStore as F } from "@inkweave/core";
|
|
8
|
+
const C = f(null), y = () => {
|
|
9
|
+
const e = k(C);
|
|
10
10
|
if (!e)
|
|
11
11
|
throw new Error("useStory must be used within StoryProvider");
|
|
12
12
|
return e;
|
|
13
13
|
}, P = ({
|
|
14
14
|
ink: e,
|
|
15
15
|
children: t
|
|
16
|
-
}) => /* @__PURE__ */ o(
|
|
16
|
+
}) => /* @__PURE__ */ o(C.Provider, { value: e, children: t }), L = ({
|
|
17
17
|
ink: e,
|
|
18
18
|
children: t,
|
|
19
19
|
className: n = "",
|
|
20
20
|
onInit: c
|
|
21
21
|
}) => {
|
|
22
22
|
const s = x(c);
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
s.current = c;
|
|
24
|
+
const l = v((r) => r.refreshKey);
|
|
25
|
+
return _(() => {
|
|
26
|
+
var r;
|
|
27
|
+
e.restart(), (r = s.current) == null || r.call(s, e);
|
|
28
|
+
}, [e]), /* @__PURE__ */ o(P, { ink: e, children: /* @__PURE__ */ o("div", { id: "inkweave-story", className: n, children: t }, l) });
|
|
29
|
+
}, I = d(L), A = ({
|
|
28
30
|
lineDelay: e = 0.05,
|
|
29
31
|
className: t = ""
|
|
30
32
|
}) => {
|
|
31
|
-
const n =
|
|
32
|
-
return /* @__PURE__ */ o("section", { id: "inkweave-contents", children: c.map((
|
|
33
|
+
const n = y(), c = v((r) => r.contents), s = n, l = (s == null ? void 0 : s.visibleLines) != null ? s.visibleLines : c.length;
|
|
34
|
+
return /* @__PURE__ */ o("section", { id: "inkweave-contents", children: c.map((r, i) => {
|
|
33
35
|
const a = {
|
|
34
|
-
"--delay": `${(
|
|
35
|
-
}, h =
|
|
36
|
-
return h ? /* @__PURE__ */ o("div", { style: a, children: /* @__PURE__ */ o("hr", { className: "inkweave-divider" }) }, u) : /* @__PURE__ */ o("div", { style: a, children: /* @__PURE__ */ o("p", { className: t, children:
|
|
36
|
+
"--delay": `${(i > l ? i - l : 0) * e}s`
|
|
37
|
+
}, h = r === $, u = h ? `divider_${i}` : `line_${i}_${r.slice(0, 20)}`;
|
|
38
|
+
return h ? /* @__PURE__ */ o("div", { style: a, children: /* @__PURE__ */ o("hr", { className: "inkweave-divider" }) }, u) : /* @__PURE__ */ o("div", { style: a, children: /* @__PURE__ */ o("p", { className: t, children: r }) }, u);
|
|
37
39
|
}) });
|
|
38
|
-
},
|
|
39
|
-
class
|
|
40
|
+
}, M = d(A);
|
|
41
|
+
class K {
|
|
40
42
|
constructor() {
|
|
41
43
|
m(this, "_components", /* @__PURE__ */ new Map());
|
|
42
44
|
}
|
|
@@ -56,11 +58,11 @@ class N {
|
|
|
56
58
|
return this._components.has(t);
|
|
57
59
|
}
|
|
58
60
|
}
|
|
59
|
-
const
|
|
61
|
+
const N = new K(), S = d(({ choice: e, index: t, onClick: n, className: c }) => {
|
|
60
62
|
const s = p(() => {
|
|
61
63
|
e.type !== "unclickable" && n(e.index);
|
|
62
|
-
}, [e.index, e.type, n]),
|
|
63
|
-
return
|
|
64
|
+
}, [e.index, e.type, n]), l = N.get(e.type);
|
|
65
|
+
return l ? /* @__PURE__ */ o("li", { style: { "--index": t }, children: g(l, {
|
|
64
66
|
onClick: s,
|
|
65
67
|
className: c,
|
|
66
68
|
val: e.val,
|
|
@@ -75,42 +77,42 @@ const O = new N(), y = d(({ choice: e, index: t, onClick: n, className: c }) =>
|
|
|
75
77
|
}
|
|
76
78
|
) });
|
|
77
79
|
});
|
|
78
|
-
|
|
79
|
-
const
|
|
80
|
+
S.displayName = "ChoiceItem";
|
|
81
|
+
const O = ({
|
|
80
82
|
onClick: e,
|
|
81
83
|
className: t = "inkweave-btn"
|
|
82
84
|
}) => {
|
|
83
|
-
const n =
|
|
84
|
-
e == null || e(
|
|
85
|
+
const n = y(), c = E((i) => i.choices), s = n, l = s && "choicesCanShow" in s ? s.choicesCanShow : !0, r = p((i) => {
|
|
86
|
+
e == null || e(i), n.choose(i);
|
|
85
87
|
}, [n, e]);
|
|
86
88
|
return /* @__PURE__ */ o(
|
|
87
89
|
"ul",
|
|
88
90
|
{
|
|
89
91
|
id: "inkweave-choices",
|
|
90
|
-
style: { visibility:
|
|
91
|
-
children: c.map((
|
|
92
|
-
|
|
92
|
+
style: { visibility: l ? "visible" : "hidden" },
|
|
93
|
+
children: c.map((i, a) => /* @__PURE__ */ o(
|
|
94
|
+
S,
|
|
93
95
|
{
|
|
94
|
-
choice:
|
|
96
|
+
choice: i,
|
|
95
97
|
index: a,
|
|
96
|
-
onClick:
|
|
98
|
+
onClick: r,
|
|
97
99
|
className: t
|
|
98
100
|
},
|
|
99
|
-
|
|
101
|
+
i.index
|
|
100
102
|
))
|
|
101
103
|
},
|
|
102
|
-
|
|
104
|
+
l.toString()
|
|
103
105
|
);
|
|
104
|
-
},
|
|
106
|
+
}, T = d(O);
|
|
105
107
|
export {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
108
|
+
N as ChoiceComponents,
|
|
109
|
+
T as Choices,
|
|
110
|
+
M as Contents,
|
|
111
|
+
I as Story,
|
|
110
112
|
P as StoryProvider,
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
113
|
+
z as useChoices,
|
|
114
|
+
B as useContents,
|
|
115
|
+
y as useStory,
|
|
116
|
+
F as useVariables
|
|
115
117
|
};
|
|
116
118
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/components/Story.tsx","../src/components/Contents.tsx","../src/components/ChoiceComponents.ts","../src/components/Choices.tsx"],"sourcesContent":["import { memo, useEffect, useRef, createContext, useContext } from 'react';\nimport type
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/Story.tsx","../src/components/Contents.tsx","../src/components/ChoiceComponents.ts","../src/components/Choices.tsx"],"sourcesContent":["import { memo, useEffect, useRef, createContext, useContext } from 'react';\nimport { contentsStore, type InkStory } from '@inkweave/core';\n\nconst StoryContext = createContext<InkStory | null>(null);\n\nexport const useStory = () => {\n\tconst ink = useContext(StoryContext);\n\tif (!ink) {\n\t\tthrow new Error('useStory must be used within StoryProvider');\n\t}\n\treturn ink;\n};\n\ninterface StoryProviderProps {\n\tink: InkStory;\n\tchildren: React.ReactNode;\n}\n\nexport const StoryProvider: React.FC<StoryProviderProps> = ({\n\tink,\n\tchildren,\n}) => {\n\treturn (\n\t\t<StoryContext.Provider value={ink}>\n\t\t\t{children}\n\t\t</StoryContext.Provider>\n\t);\n};\n\ninterface StoryProps {\n\tink: InkStory;\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tonInit?: (ink: InkStory) => void;\n}\n\nconst StoryComponent: React.FC<StoryProps> = ({\n\tink,\n\tchildren,\n\tclassName = '',\n\tonInit,\n}) => {\n\tconst onInitRef = useRef(onInit);\n\tonInitRef.current = onInit;\n\tconst refreshKey = contentsStore((state) => state.refreshKey);\n\n\tuseEffect(() => {\n\t\tink.restart();\n\t\tonInitRef.current?.(ink);\n\t}, [ink]);\n\n\treturn (\n\t\t<StoryProvider ink={ink}>\n\t\t\t<div id=\"inkweave-story\" className={className} key={refreshKey}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</StoryProvider>\n\t);\n};\n\nexport default memo(StoryComponent);","import { memo, CSSProperties } from 'react';\nimport { CHOICE_SEPARATOR, contentsStore } from '@inkweave/core';\nimport { useStory } from './Story';\n\ninterface ContentsProps {\n\tlineDelay?: number;\n\tclassName?: string;\n}\n\nconst ContentsComponent: React.FC<ContentsProps> = ({\n\tlineDelay = 0.05,\n\tclassName = '',\n}) => {\n\tconst ink = useStory();\n\tconst contents = contentsStore((state) => state.contents);\n\tconst inkRecord = ink as unknown as Record<string, unknown>;\n\tconst visibleLines =\n\t\tinkRecord?.visibleLines != undefined\n\t\t\t? (inkRecord.visibleLines as number)\n\t\t\t: contents.length;\n\n\treturn (\n\t\t<section id=\"inkweave-contents\">\n\t\t\t{contents.map((item: string, i: number) => {\n\t\t\t\tconst style: CSSProperties = {\n\t\t\t\t\t'--delay': `${\n\t\t\t\t\t\t(i > visibleLines ? i - visibleLines : 0) * lineDelay\n\t\t\t\t\t}s`,\n\t\t\t\t} as CSSProperties & { '--delay': string };\n\n\t\t\t\tconst isDivider = item === CHOICE_SEPARATOR;\n\t\t\t\tconst key = isDivider ? `divider_${i}` : `line_${i}_${item.slice(0, 20)}`;\n\n\t\t\t\tif (isDivider) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={key} style={style}>\n\t\t\t\t\t\t\t<hr className=\"inkweave-divider\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={key} style={style}>\n\t\t\t\t\t\t<p className={className}>{item}</p>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</section>\n\t);\n};\n\nexport default memo(ContentsComponent);","import type { FC } from 'react';\n\nexport interface ChoiceComponentProps {\n\tval?: string;\n\tonClick: () => void;\n\tclassName?: string;\n\tchildren?: React.ReactNode;\n}\n\ntype ChoiceComponent = FC<ChoiceComponentProps>;\n\nclass ChoiceComponentsClass {\n\tprivate _components: Map<string, ChoiceComponent> = new Map();\n\n\tget(type: string): ChoiceComponent | undefined {\n\t\treturn this._components.get(type);\n\t}\n\n\tregister(type: string, component: ChoiceComponent) {\n\t\tthis._components.set(type, component);\n\t}\n\n\tunregister(type: string) {\n\t\tthis._components.delete(type);\n\t}\n\n\tclear() {\n\t\tthis._components.clear();\n\t}\n\n\thas(type: string): boolean {\n\t\treturn this._components.has(type);\n\t}\n}\n\nexport const ChoiceComponents = new ChoiceComponentsClass();","import { memo, createElement, useCallback } from 'react';\nimport { Choice, choicesStore } from '@inkweave/core';\nimport { useStory } from './Story';\nimport { ChoiceComponents } from './ChoiceComponents';\n\ninterface ChoiceItemProps {\n\tchoice: Choice;\n\tindex: number;\n\tonClick: (index: number) => void;\n\tclassName: string;\n}\n\nconst ChoiceItem: React.FC<ChoiceItemProps> = memo(({ choice, index, onClick, className }) => {\n\tconst handleClick = useCallback(() => {\n\t\tif (choice.type !== 'unclickable') {\n\t\t\tonClick(choice.index);\n\t\t}\n\t}, [choice.index, choice.type, onClick]);\n\n\tconst Component = ChoiceComponents.get(choice.type);\n\tif (Component) {\n\t\treturn (\n\t\t\t<li style={{ '--index': index } as React.CSSProperties}>\n\t\t\t\t{createElement(Component, {\n\t\t\t\t\tonClick: handleClick,\n\t\t\t\t\tclassName,\n\t\t\t\t\tval: choice.val,\n\t\t\t\t\tchildren: choice.text,\n\t\t\t\t})}\n\t\t\t</li>\n\t\t);\n\t}\n\n\treturn (\n\t\t<li style={{ '--index': index } as React.CSSProperties}>\n\t\t\t<a\n\t\t\t\tonClick={handleClick}\n\t\t\t\tclassName={`${className} ${choice.type === 'unclickable' ? 'disabled' : ''}`}\n\t\t\t\taria-disabled={choice.type === 'unclickable'}\n\t\t\t>\n\t\t\t\t{choice.text}\n\t\t\t</a>\n\t\t</li>\n\t);\n});\nChoiceItem.displayName = 'ChoiceItem';\n\ninterface ChoicesProps {\n\tonClick?: (index: number) => void;\n\tclassName?: string;\n}\n\nconst ChoicesComponent: React.FC<ChoicesProps> = ({\n\tonClick,\n\tclassName = 'inkweave-btn',\n}) => {\n\tconst ink = useStory();\n\tconst choices = choicesStore((state) => state.choices);\n\tconst inkRecord = ink as unknown as Record<string, unknown>;\n\tconst canShow =\n\t\tinkRecord && 'choicesCanShow' in inkRecord\n\t\t\t? (inkRecord.choicesCanShow as boolean)\n\t\t\t: true;\n\n\tconst handleClick = useCallback((index: number) => {\n\t\tonClick?.(index);\n\t\tink.choose(index);\n\t}, [ink, onClick]);\n\n\treturn (\n\t\t<ul\n\t\t\tid=\"inkweave-choices\"\n\t\t\tkey={canShow.toString()}\n\t\t\tstyle={{ visibility: canShow ? 'visible' : 'hidden' }}\n\t\t>\n\t\t\t{choices.map((choice: Choice, index: number) => (\n\t\t\t\t<ChoiceItem\n\t\t\t\t\tkey={choice.index}\n\t\t\t\t\tchoice={choice}\n\t\t\t\t\tindex={index}\n\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\tclassName={className}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</ul>\n\t);\n};\n\nexport default memo(ChoicesComponent);"],"names":["StoryContext","createContext","useStory","ink","useContext","StoryProvider","children","StoryComponent","className","onInit","onInitRef","useRef","refreshKey","contentsStore","state","useEffect","_a","jsx","Story","memo","ContentsComponent","lineDelay","contents","inkRecord","visibleLines","item","style","isDivider","CHOICE_SEPARATOR","key","Contents","ChoiceComponentsClass","__publicField","type","component","ChoiceComponents","ChoiceItem","choice","index","onClick","handleClick","useCallback","Component","ChoicesComponent","choices","choicesStore","canShow","Choices"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inkweave/react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "React components for InkWeave",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
],
|
|
19
19
|
"scripts": {
|
|
20
20
|
"build": "tsc --noEmit && vite build",
|
|
21
|
-
"typecheck": "tsc --noEmit"
|
|
21
|
+
"typecheck": "tsc --noEmit",
|
|
22
|
+
"publish:pkg": "NPM_CONFIG_TOKEN=$(pass show npm/token) bun publish --access public"
|
|
22
23
|
},
|
|
23
24
|
"keywords": [
|
|
24
25
|
"ink",
|