47 | {/* */}
48 | {/* Toolbar({ model, inject }) */}
49 | {Seed({ model, inject })}
50 | {SettingsView({ model, inject })}
51 |
52 | );
53 | };
54 | ExpToPat.test();
55 | export default App;
56 |
--------------------------------------------------------------------------------
/src/Hover.tsx:
--------------------------------------------------------------------------------
1 | import * as ID from "./syntax/ID";
2 | import * as Pat from "./syntax/Pat";
3 | import * as Model from "./Model";
4 |
5 | export type t =
6 | | { t: "NoHover" }
7 | | { t: "StageNode"; id: ID.t }
8 | | { t: "TransformSource"; pat: Pat.t; idx: number }
9 | | { t: "TransformResult"; pat: Pat.t; idx: number };
10 |
11 | export const init: t = { t: "NoHover" };
12 |
13 | export const eq = (a: t, b: t): boolean => {
14 | switch (a.t) {
15 | case "NoHover":
16 | return b.t == "NoHover";
17 | case "StageNode":
18 | return b.t == "StageNode" && (a.id === b.id);
19 | case "TransformSource":
20 | return b.t == "TransformSource" && Pat.eq(a.pat, b.pat);
21 | case "TransformResult":
22 | return b.t == "TransformResult" && Pat.eq(a.pat, b.pat);
23 | }
24 | }
25 |
26 | export const get_binding = (model: Model.t): Pat.Binding[] => {
27 | switch (model.hover.t) {
28 | case "NoHover":
29 | return [];
30 | case "StageNode":
31 | return [];
32 | case "TransformSource":
33 | if (model.stage.selection == "unselected") return [];
34 | const rs = Pat.matches_at_path(
35 | model.stage.exp,
36 | model.hover.pat,
37 | model.stage.selection
38 | );
39 | return rs == "NoMatch" ? [] : rs;
40 | case "TransformResult":
41 | if (model.stage.selection == "unselected") return [];
42 | const rr = Pat.matches_at_path(
43 | model.stage.exp,
44 | model.hover.pat,
45 | model.stage.selection
46 | );
47 | return rr == "NoMatch" ? [] : rr;
48 | }
49 | };
50 |
--------------------------------------------------------------------------------
/src/Keyboard.tsx:
--------------------------------------------------------------------------------
1 | import * as Action from "./Action";
2 |
3 | const action_of = (key: string): Action.t | "NoBinding" => {
4 | switch (key) {
5 | case "Escape":
6 | return { t: "restart" };
7 | case "ArrowLeft":
8 | return { t: "moveStage", direction: "left" };
9 | case "ArrowRight":
10 | return { t: "moveStage", direction: "right" };
11 | case "ArrowUp":
12 | return { t: "moveStage", direction: "up" };
13 | case "ArrowDown":
14 | return { t: "moveStage", direction: "down" };
15 | case "1":
16 | return { t: "applyTransform", idx: 0, direction: "forward" };
17 | case "2":
18 | return { t: "applyTransform", idx: 1, direction: "forward" };
19 | case "3":
20 | return { t: "applyTransform", idx: 2, direction: "forward" };
21 | case "4":
22 | return { t: "applyTransform", idx: 3, direction: "forward" };
23 | case "w":
24 | return { t: "moveTool", direction: "up" };
25 | case "s":
26 | return { t: "moveTool", direction: "down" };
27 | case "a":
28 | return { t: "moveTool", direction: "left" };
29 | case "d":
30 | return { t: "moveTool", direction: "right" };
31 | case " ":
32 | return { t: "applyTransformSelected" };
33 | default:
34 | return "NoBinding";
35 | }
36 | };
37 |
38 | export const keydown = (inject: Action.Inject) => (event: KeyboardEvent) => {
39 | //console.log("keydown:" + keyName);
40 | let action = action_of(event.key);
41 | if (action == "NoBinding") return;
42 | event.preventDefault();
43 | inject(action);
44 | };
45 |
46 | export const keyup = (_inject: Action.Inject) => (event: KeyboardEvent) => {
47 | //console.log("keyup:" + keyName);
48 | switch (event.key) {
49 | }
50 | };
51 |
--------------------------------------------------------------------------------
/src/Model.tsx:
--------------------------------------------------------------------------------
1 | import * as Settings from "./Settings";
2 | import * as Stage from "./Stage";
3 | import * as Hover from "./Hover";
4 | import * as ToolBox from "./ToolBox";
5 |
6 | export type Model = {
7 | stage: Stage.t;
8 | tools: ToolBox.t;
9 | settings: Settings.t;
10 | hover: Hover.t;
11 | };
12 |
13 | export type t = Model;
14 |
15 | export const init: Model = {
16 | stage: Stage.init,
17 | tools: ToolBox.init,
18 | settings: Settings.init,
19 | hover: Hover.init,
20 | };
21 |
--------------------------------------------------------------------------------
/src/Names.tsx:
--------------------------------------------------------------------------------
1 | import * as Settings from "./Settings";
2 |
3 | const to_singlechar = (emoji: string): string => {
4 | switch (emoji) {
5 | case "☁️":
6 | return "L";
7 | case "🍄":
8 | return "M";
9 | case "🎲":
10 | return "D";
11 | case "🦠":
12 | return "V";
13 | case "🐝":
14 | return "E";
15 | case "♫":
16 | return "A";
17 | case "♥":
18 | return "B";
19 | case "✿":
20 | return "C";
21 | case "🌘":
22 | return "1";
23 | case "🌑":
24 | return "0";
25 | case "➕":
26 | return "+";
27 | case "➖":
28 | return "-";
29 | case "✖️":
30 | return "*";
31 | default:
32 | return "?";
33 | }
34 | };
35 |
36 | export const get = (symbols: Settings.symbols, symbol: string):string => {
37 | switch (symbols) {
38 | case "Emoji":
39 | return symbol;
40 | case "SingleChar":
41 | return to_singlechar(symbol);
42 | default:
43 | return symbol;
44 | }
45 | };
46 |
--------------------------------------------------------------------------------
/src/Projector.tsx:
--------------------------------------------------------------------------------
1 | import * as ID from "./syntax/ID";
2 |
3 | type PaintColor = "Cyan" | "Magenta" | "Yellow";
4 |
5 | type Painter = PaintColor | "Unpainted";
6 |
7 | type Projector = {
8 | painter: Painter;
9 | };
10 |
11 | type t = Projector;
12 |
13 | export type PMap = Map{Names.get(props.symbols, props.node.sym)}
68 |
69 | }
70 | >
71 |
76 | {Names.get(props.symbols, props.node.sym)}
77 |
78 |
88 | {
89 |
90 | {(kid, i) => (
91 |
103 | }
104 |
105 | );
106 | }
107 | };
108 |
109 | export const ExpView: Component<{
110 | stage: Stage.t;
111 | inject: Action.Inject;
112 | mask: Pat.Binding[];
113 | symbols: Settings.symbols;
114 | }> = (props) =>
115 | ExpViewGo({
116 | info: props.stage.info,
117 | selection: props.stage.selection,
118 | node: props.stage.exp,
119 | inject: props.inject,
120 | mask: props.mask,
121 | is_head: false,
122 | animate: true,
123 | symbols: props.symbols,
124 | });
125 |
126 | export const ViewOnly: Component<{
127 | node: Exp;
128 | symbols: Settings.symbols;
129 | }> = (props) =>
130 | ExpViewGo({
131 | info: Statics.mk(props.node, []),
132 | selection: "unselected",
133 | node: props.node,
134 | animate: false,
135 | is_head: false,
136 | inject: (_) => {},
137 | mask: [],
138 | symbols: props.symbols,
139 | });
140 |
--------------------------------------------------------------------------------
/src/view/PreView.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from "solid-js";
2 | import { For, Show, Switch, Match } from "solid-js";
3 | import { Transform, at_path, flip } from "../Transform";
4 | import { subtree_at } from "../syntax/Node";
5 | import { ViewOnly } from "./ExpView";
6 | import * as Pat from "../syntax/Pat";
7 | import * as Exp from "../syntax/Exp";
8 | import * as Path from "../syntax/Path";
9 | import * as Stage from "../Stage";
10 | import * as Action from "../Action";
11 | import * as Settings from "../Settings";
12 | import { map_ids } from "../syntax/Node";
13 | import * as Id from "../syntax/ID";
14 |
15 | const transformer =
16 | (inject: Action.Inject, transform: Transform, path: Path.t) =>
17 | (_e: Event) => {
18 | inject({
19 | t: "transformNode",
20 | idx: -1,
21 | transform,
22 | f: at_path(transform, path),
23 | });
24 | };
25 |
26 | const directed = (transforms: Transform[]): Transform[] =>
27 | transforms.flatMap((t) => [t, flip(t)]);
28 |
29 | const do_transforms = (
30 | exp: Exp.t,
31 | transforms: Transform[]
32 | ): [Transform, Exp.t][] =>
33 | directed(transforms)
34 | .map((t) => [t, at_path(t, [])(exp)] as [Transform, Pat.TransformResult])
35 | .filter((res): res is [Transform, Exp.t] => res[1] !== "NoMatch")
36 | // filter duplicate expressions
37 | .filter(
38 | ([_, exp], i, arr) =>
39 | arr.findIndex(([_, exp2]) => Exp.equals(exp, exp2)) === i
40 | )
41 | // unduplicate ids to avoid messing with transition animations
42 | .map(([t, e]): [Transform, Exp.t] => [t, map_ids(() => Id.mk(), e)]);
43 |
44 | const preview = (
45 | node: Exp.t,
46 | settings: Settings.t,
47 | transformer: (_e: Event) => void
48 | ) => (
49 |
53 | {ViewOnly({ node: node, symbols: settings.symbols })}
54 |
55 | );
56 |
57 | export const AdjacentPossible: Component<{
58 | stage: Stage.t;
59 | tools: Transform[];
60 | inject: Action.Inject;
61 | settings: Settings.t;
62 | }> = (props) => {
63 | if (props.stage.selection === "unselected") return ;
64 | const selection = subtree_at(props.stage.selection, props.stage.exp);
65 | if (selection === undefined) return ;
66 | return (
67 |
68 |
69 | {([transform, node]) => {
70 | if (props.stage.selection === "unselected") return ;
71 | return preview(
72 | node,
73 | props.settings,
74 | transformer(props.inject, transform, props.stage.selection)
75 | );
76 | }}
77 |
78 |
79 | );
80 | };
81 |
--------------------------------------------------------------------------------
/src/view/SeedView.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from "solid-js";
2 | import { StageView } from "../view/StageView";
3 | import { ToolsView } from "../view/ToolsView";
4 | import { AdjacentPossible } from "../view/PreView";
5 | import * as Model from "../Model";
6 | import * as Action from "../Action";
7 | import infinity from "../assets/nool-seed-infinity-only.svg"
8 |
9 | const blah = () => (
10 |
20 | );
21 |
22 | export const Seed: Component<{ model: Model.t; inject: Action.Inject }> = (
23 | props
24 | ) => (
25 | {
34 | e.preventDefault();
35 | props.inject({ t: "unsetSelections" });
36 | }}
37 | >
38 | {ToolsView({ model: props.model, inject: props.inject })}
39 | {/*
53 | );
54 |
--------------------------------------------------------------------------------
/src/view/SettingsView.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from "solid-js";
2 | import { Model } from "../Model";
3 | import * as Settings from "../Settings";
4 | import * as Action from "../Action";
5 | import sound_icon_on from "../assets/icons/sound-on.svg";
6 | import sound_icon_off from "../assets/icons/sound-off.svg";
7 | import motion_on from "../assets/icons/motion-on.svg";
8 | import motion_off from "../assets/icons/motion-off.svg";
9 | import motion_half from "../assets/icons/motion-half.svg";
10 | import preview_on from "../assets/icons/eye-open.svg";
11 | import preview_off from "../assets/icons/eye-closed.svg";
12 | import linear_prefix from "../assets/icons/noun-tree-1052096.svg";
13 | import linear_infix from "../assets/icons/noun-tree-1039106.svg";
14 | import tree_top from "../assets/icons/noun-tree-1052083.svg";
15 | import tree_left from "../assets/icons/noun-1560867.svg"
16 | import sun_on from "../assets/icons/noun-sun-5362089.svg";
17 | import sun_off from "../assets/icons/noun-sun-6322390.svg";
18 | import palette_2 from "../assets/icons/noun-paint-6329583.svg";
19 | import palette_1 from "../assets/icons/noun-palette-1918496.svg";
20 | import alphabet from "../assets/icons/noun-alphabet-3591519.svg"
21 | import ded from "../assets/icons/noun-dead-5130035.svg"
22 | import prims from "../assets/icons/noun-geometry-4695832.svg"
23 |
24 | //TODO: qr code to disable id display
25 |
26 | const setSetting =
27 | (inject: Action.Inject, action: Settings.Action) => (e: Event) => {
28 | e.preventDefault();
29 | e.stopPropagation();
30 | inject({
31 | t: "setSetting",
32 | action,
33 | });
34 | };
35 |
36 | const sound_icon = (sound: boolean): string =>
37 | sound ? sound_icon_on : sound_icon_off;
38 |
39 | const motion_icon = (motion: Settings.motion): string => {
40 | switch (motion) {
41 | case "On":
42 | return motion_on;
43 | case "Off":
44 | return motion_off;
45 | case "Half":
46 | return motion_half;
47 | }
48 | };
49 |
50 | const preview_icon = (preview: boolean): string =>
51 | preview ? preview_on : preview_off;
52 |
53 | const projection_icon = (projection: Settings.projection): string => {
54 | switch (projection) {
55 | case "LinearPrefix":
56 | return linear_prefix;
57 | case "LinearInfix":
58 | return linear_infix;
59 | case "TreeLeft":
60 | return tree_left;
61 | case "TreeTop":
62 | return tree_top;
63 | }
64 | };
65 |
66 | const symbols_icon = (symbols: Settings.symbols): string => {
67 | switch (symbols) {
68 | case "Emoji":
69 | return prims;
70 | case "SingleChar":
71 | return alphabet;
72 | }
73 | };
74 |
75 | const theme_icon = (theme: Settings.theme): string => {
76 | switch (theme) {
77 | case "Dark":
78 | return sun_off;
79 | case "Light":
80 | return sun_on;
81 | }
82 | };
83 |
84 | let action_icon = (action: Settings.Action, settings: Settings.t): string => {
85 | switch (action) {
86 | case "ToggleSound":
87 | return sound_icon(settings.sound);
88 | case "ToggleMotion":
89 | return motion_icon(settings.motion);
90 | case "TogglePreview":
91 | return preview_icon(settings.preview);
92 | case "ToggleProjection":
93 | return projection_icon(settings.projection);
94 | case "ToggleSymbols":
95 | return symbols_icon(settings.symbols);
96 | case "ToggleDark":
97 | return theme_icon(settings.theme);
98 | }
99 | };
100 |
101 | let icon = (
102 | inject: Action.Inject,
103 | settings: Settings.t,
104 | action: Settings.Action
105 | ) => (
106 | ♾️
*/}
40 |
41 |
42 |
43 | {StageView({ model: props.model, inject: props.inject })}
44 | {props.model.settings.preview
45 | ? AdjacentPossible({
46 | stage: props.model.stage,
47 | tools: props.model.tools.transforms,
48 | inject: props.inject,
49 | settings: props.model.settings,
50 | })
51 | : null}
52 |
118 | {icon(props.inject, props.model.settings, "ToggleSound")}
119 | {icon(props.inject, props.model.settings, "ToggleMotion")}
120 | {icon(props.inject, props.model.settings, "TogglePreview")}
121 | {icon(props.inject, props.model.settings, "ToggleDark")}
122 | {icon(props.inject, props.model.settings, "ToggleProjection")}
123 | {icon(props.inject, props.model.settings, "ToggleSymbols")}
124 |
125 |
126 | );
127 |
--------------------------------------------------------------------------------
/src/view/StageView.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from "solid-js";
2 | import { For, Show, Switch, Match } from "solid-js";
3 | import { Model } from "../Model";
4 | import * as Action from "../Action";
5 | import { ExpView } from "./ExpView";
6 | import * as Hover from "../Hover";
7 | import { depth } from "../syntax/Node";
8 |
9 | const stage_scale = (d: number) => (d == 0 ? 1 : 4 / (d + 1));
10 |
11 | export const StageView: Component<{
12 | model: Model;
13 | inject: (_: Action.t) => void;
14 | }> = (props) => (
15 |
19 |
22 |
31 | );
32 |
--------------------------------------------------------------------------------
/src/view/ToolsView.tsx:
--------------------------------------------------------------------------------
1 | import { Component } from "solid-js";
2 | import { For, Index, Switch, Match } from "solid-js";
3 | import toolbarbkg from "../assets/ps-toolbar.png";
4 | import * as Pat from "../syntax/Pat";
5 | import { Model } from "../Model";
6 | import * as Hover from "../Hover";
7 | import * as Action from "../Action";
8 | import { Transform, flip, at_path } from "../Transform";
9 | import * as ToolBox from "../ToolBox";
10 | import * as Names from "../Names";
11 | import * as Settings from "../Settings";
12 | import * as Sound from "../Sound";
13 | import { map_ids } from "../syntax/Node";
14 | import * as Util from "../Util";
15 | import * as Stage from "../Stage";
16 |
17 | export const Toolbar: Component<{ model: Model; inject: Action.Inject }> = (
18 | props
19 | ) => {
20 | return (
21 |
23 | {ExpView({
24 | stage: props.model.stage,
25 | inject: props.inject,
26 | mask: Hover.get_binding(props.model),
27 | symbols: props.model.settings.symbols,
28 | })}
29 |
30 |
22 | .
23 |
24 | );
25 | };
26 |
27 | const PatView: Component<{
28 | p: Pat.t;
29 | is_head: boolean;
30 | symbols: Settings.symbols;
31 | }> = (props) => {
32 | switch (props.p.t) {
33 | case "Atom": {
34 | return (
35 |
41 | {Names.get(props.symbols, props.p.sym.name)}
42 |
43 | );
44 | }
45 | case "Comp":
46 | return (
47 |
48 |
49 | {(kid, i) =>
50 | PatView({ p: kid, is_head: i() === 0, symbols: props.symbols })
51 | }
52 |
53 |
54 | );
55 | }
56 | };
57 |
58 | const matches_at = (stage: Stage.t, pat: Pat.t): Pat.MatchResult =>
59 | stage.selection == "unselected"
60 | ? "NoMatch"
61 | : Pat.matches_at_path(stage.exp, pat, stage.selection);
62 |
63 | const filter_transforms = (stage: Stage.t, ts: Transform[]): Transform[] =>
64 | ts.filter(
65 | (t) =>
66 | matches_at(stage, t.source) !== "NoMatch" &&
67 | matches_at(stage, t.result) !== "NoMatch"
68 | );
69 |
70 | const source_matches_cls = (props: { model: Model; t: Transform }) =>
71 | matches_at(props.model.stage, props.t.source) === "NoMatch"
72 | ? "NoMatch"
73 | : "match";
74 |
75 | const result_matches_cls = (props: { model: Model; t: Transform }) =>
76 | matches_at(props.model.stage, props.t.result) === "NoMatch"
77 | ? "NoMatch"
78 | : "match";
79 |
80 | const TransformView: Component<{
81 | idx: number;
82 | t: Transform;
83 | model: Model;
84 | inject: (_: Action.t) => void;
85 | }> = (props) => {
86 | const transformNode = (e: Event) => {
87 | e.preventDefault();
88 | e.stopPropagation();
89 | if (props.model.stage.selection != "unselected") {
90 | props.inject({
91 | t: "transformNodeAndFlipTransform",
92 | target: "Source",
93 | idx: props.idx,
94 | transform: props.t,
95 | f: at_path(props.t, props.model.stage.selection),
96 | });
97 | }
98 | };
99 | const transformNodeReverse = (e: Event) => {
100 | e.preventDefault();
101 | e.stopPropagation();
102 | if (props.model.stage.selection != "unselected") {
103 | props.inject({
104 | t: "transformNodeAndFlipTransform",
105 | target: "Result",
106 | idx: props.idx,
107 | transform: props.t,
108 | f: at_path(flip(props.t), props.model.stage.selection),
109 | });
110 | }
111 | };
112 | const setHover = (fn: any, target: Hover.t) => (e: Event) => {
113 | if (fn(props) === "match")
114 | props.inject({
115 | t: "setHover",
116 | target,
117 | });
118 | };
119 | const flipTransform = (e: Event) => {
120 | e.preventDefault();
121 | e.stopPropagation();
122 | props.inject({
123 | t: "flipTransform",
124 | idx: props.idx,
125 | });
126 | };
127 | const do_nothing = (e: Event) => {
128 | e.preventDefault();
129 | e.stopPropagation();
130 | props.inject({ t: "Noop" });
131 | };
132 | const selected_res = (tools: ToolBox.t, c: number) =>
133 | tools.selector[0] === c && tools.selector[1] === 1 ? "selected" : "";
134 | const selected_src = (tools: ToolBox.t, c: number) =>
135 | tools.selector[0] === c && tools.selector[1] === 0 ? "selected" : "";
136 | return (
137 |
142 | {/*
210 | );
211 | };
212 |
213 | const select_transforms = (stage:Stage.t,tools: ToolBox.t): [number, Transform][] => {
214 | //const filtered_transforms = filter_transforms(stage, tools.transforms);
215 | const filtered_transforms = tools.transforms;
216 | /* want to take tools.size tools starting at tools.offset (index into tools)
217 | and treat the list as a ring buffer */
218 |
219 | const len = filtered_transforms.length;
220 | const offset = tools.offset % len;
221 | const size = tools.size;
222 | const idxs = [...Array(size).keys()].map((i) => (i + offset) % len);
223 | return idxs.map((i) => [i, filtered_transforms[i]]);
224 | };
225 |
226 | function throttle(
227 | func: (...args: any[]) => void,
228 | limit: number
229 | ): (...args: any[]) => void {
230 | let inThrottle: boolean;
231 | return function (this: any, ...args: any[]) {
232 | if (!inThrottle) {
233 | func.apply(this, args);
234 | inThrottle = true;
235 | setTimeout(() => (inThrottle = false), limit);
236 | }
237 | };
238 | }
239 |
240 | export const ToolsView: Component<{
241 | model: Model;
242 | inject: (_: Action.t) => void;
243 | }> = (props) => {
244 | return (
245 | {props.t.name}
*/}
143 |
157 | id + 100000 + 100 * props.idx, props.t.source)}
159 | is_head={false}
160 | symbols={props.model.settings.symbols}
161 | />
162 |
163 |
164 |
165 | {/* arrows:
166 | ⇋ ⇌ ⇆ ⇄ ⇨ ➥ ➫ ➬
167 | → ⇋ ⥊ ⥋ ⇋ ⇌ ⇆ ⇄
168 | ⇐ ⇒ ⟸ ⟹ ⟺ ⟷ ⬄
169 | ↔ ⬌ ⟵ ⟶ ← → ⬅ ⇦
170 | */}
171 |
177 | →
178 |
179 |
185 | ←
186 |
187 |
188 |
189 |
203 | id + 200000 + 100 * props.idx, props.t.result)}
205 | is_head={false}
206 | symbols={props.model.settings.symbols}
207 | />
208 |
209 | {
248 | //console.log("wheel deltay:", e.deltaY);
249 | if (Math.abs(e.deltaY) < 1.5) return;
250 | if (e.shiftKey) {
251 | throttle(() => {
252 | const offset = e.deltaY == 0 ? 0 : e.deltaY / Math.abs(e.deltaY);
253 | //console.log("SHIFT GYOOOO", offset);
254 | props.inject({
255 | t: "wheelNumTools",
256 | offset,
257 | });
258 | }, 1000)();
259 | } else {
260 | throttle(() => {
261 | const offset = e.deltaY == 0 ? 0 : e.deltaY / Math.abs(e.deltaY);
262 | //console.log("GYOOOO", offset);
263 | props.inject({
264 | t: "wheelTools",
265 | offset: offset,
266 | });
267 | }, 1000)();
268 | }
269 | }}
270 | >
271 |
272 | {([idx, t]) =>
273 | TransformView({
274 | idx,
275 | t,
276 | model: props.model,
277 | inject: props.inject,
278 | })
279 | }
280 |
281 |
282 | );
283 | };
284 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": true,
4 | "target": "ESNext",
5 | "module": "ESNext",
6 | "moduleResolution": "node",
7 | "allowSyntheticDefaultImports": true,
8 | "esModuleInterop": true,
9 | "jsx": "preserve",
10 | "jsxImportSource": "solid-js",
11 | "types": ["vite/client", "jest", "dom-view-transitions"],
12 | "noEmit": true,
13 | "isolatedModules": true,
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import solidPlugin from 'vite-plugin-solid';
3 |
4 | export default defineConfig({
5 | base: "./",
6 | plugins: [solidPlugin()],
7 | server: {
8 | port: 3000,
9 | },
10 | build: {
11 | target: 'esnext',
12 | },
13 | assetsInclude: ['**/*.m4a', '**/*.wav'],
14 | });
15 |
--------------------------------------------------------------------------------