();
42 | const [open, setOpen] = createSignal(false);
43 | let floatingUl!: HTMLUListElement;
44 | const position = useFloating(reference, floating, {
45 | whileElementsMounted: autoUpdate,
46 | placement: "bottom-start",
47 | middleware: [offset(4), flip(), shift()],
48 | });
49 |
50 | const selectedItemFromList = createMemo(() => {
51 | const item = list.find(({ id }) => id === store.layout);
52 | return item;
53 | });
54 |
55 | return (
56 |
60 |
61 |
62 |
75 |
89 |
98 |
99 |
100 | {({ id, text, Icon }) => (
101 | - {
106 | setOpen(false);
107 | setStore("layout", id as "jsx");
108 | }}
109 | onKeyDown={(e) => {
110 | if (e.key !== "Enter") return;
111 | setOpen(false);
112 | setStore("layout", id as "jsx");
113 | }}
114 | >
115 |
122 |
{Icon && }
123 |
{text}
124 |
126 | )}
127 |
128 |
129 |
131 |
132 |
142 |
143 |
144 |
145 |
146 |
147 |
154 |
155 | {props.children}
156 |
157 |
158 | );
159 | };
160 |
161 | export default ActionsPanel;
162 |
--------------------------------------------------------------------------------
/src/components/ActionsPanel/TogglePanelButton.tsx:
--------------------------------------------------------------------------------
1 | import { createMediaQuery } from "@solid-primitives/media";
2 | import { createEffect, createSignal, on } from "solid-js";
3 | import { onTransitionend } from "../../utils/onTransitionend";
4 | import XIcon from "../Icons/XIcon";
5 | import SettingsIcon from "../Icons/SettingsIcon";
6 |
7 | const TogglePanelButton = () => {
8 | const vwMax850px = createMediaQuery("(max-width:850px)");
9 | const [close, setClose] = createSignal(false);
10 | let toggleBtnXIconEl!: SVGSVGElement;
11 | let toggleBtnSettingsIconEl!: HTMLDivElement;
12 |
13 | const queryEls = () => {
14 | const actionsPanelEl = document.getElementById("actions-panel")!;
15 | const settingsPanelContainerEl = document.getElementById("settings-panel-container")!;
16 | const configContainerEl = document.getElementById("config-container")!;
17 |
18 | return {
19 | actionsPanelEl,
20 | settingsPanelContainerEl,
21 | configContainerEl,
22 | };
23 | };
24 |
25 | const openPanel = () => {
26 | const { settingsPanelContainerEl, configContainerEl } = queryEls();
27 | configContainerEl.style.display = "";
28 | settingsPanelContainerEl.style.height = "";
29 | settingsPanelContainerEl.style.transition = "height 150ms";
30 | toggleBtnXIconEl.style.transform = "scale(1)";
31 | toggleBtnXIconEl.style.transition = "transform 350ms";
32 | toggleBtnSettingsIconEl.style.transform = "scale(0)";
33 | toggleBtnSettingsIconEl.style.transition = "transform 350ms";
34 |
35 | onTransitionend(settingsPanelContainerEl, () => {
36 | settingsPanelContainerEl.style.minHeight = "";
37 | settingsPanelContainerEl.style.transition = "";
38 | });
39 | };
40 |
41 | const closePanel = () => {
42 | const { actionsPanelEl, settingsPanelContainerEl, configContainerEl } = queryEls();
43 | const actionsPanelHeight = actionsPanelEl.getBoundingClientRect().height;
44 | settingsPanelContainerEl.style.height = `${actionsPanelHeight}px`;
45 | settingsPanelContainerEl.style.minHeight = "auto";
46 | settingsPanelContainerEl.style.transition = "height 150ms";
47 | toggleBtnXIconEl.style.transform = "scale(0)";
48 | toggleBtnXIconEl.style.transition = "transform 350ms";
49 | toggleBtnSettingsIconEl.style.opacity = "1";
50 | toggleBtnSettingsIconEl.style.transform = "scale(0)";
51 | requestAnimationFrame(() => {
52 | requestAnimationFrame(() => {
53 | toggleBtnSettingsIconEl.style.transform = "scale(1)";
54 | toggleBtnSettingsIconEl.style.transition = "transform 350ms";
55 | });
56 | });
57 |
58 | onTransitionend(settingsPanelContainerEl, () => {
59 | settingsPanelContainerEl.style.transition = "";
60 | configContainerEl.style.display = "none";
61 | });
62 | };
63 |
64 | createEffect(
65 | on(
66 | close,
67 | (close) => {
68 | if (close) {
69 | closePanel();
70 | return;
71 | }
72 | openPanel();
73 | },
74 | { defer: true },
75 | ),
76 | );
77 |
78 | createEffect(
79 | on(
80 | vwMax850px,
81 | (vwMax850px) => {
82 | if (!close()) {
83 | return;
84 | }
85 |
86 | const run = () => {
87 | const { actionsPanelEl, settingsPanelContainerEl, configContainerEl } = queryEls();
88 |
89 | const actionsPanelHeight = actionsPanelEl.getBoundingClientRect().height;
90 |
91 | if (vwMax850px) {
92 | settingsPanelContainerEl.style.height = `${actionsPanelHeight}px`;
93 | settingsPanelContainerEl.style.minHeight = "auto";
94 | configContainerEl.style.display = "none";
95 | } else {
96 | settingsPanelContainerEl.style.height = "";
97 | settingsPanelContainerEl.style.minHeight = "";
98 | configContainerEl.style.display = "";
99 | }
100 | };
101 |
102 | setTimeout(run, vwMax850px ? 100 : 0);
103 | },
104 | { defer: true },
105 | ),
106 | );
107 |
108 | return (
109 |
122 | );
123 | };
124 |
125 | export default TogglePanelButton;
126 |
--------------------------------------------------------------------------------
/src/components/ConfigPanel/ConfigPanel.tsx:
--------------------------------------------------------------------------------
1 | import { $TRACK, createEffect, createSignal, For, on, onMount } from "solid-js";
2 | import { createStore, produce } from "solid-js/store";
3 | import { HTMLtoJSXConfig } from "../../lib/html-to-jsx";
4 | import { ConfigKey, defaultConfig, setStore, store, TJSXConfig } from "../../store";
5 | import { debounce } from "@solid-primitives/scheduled";
6 | import Select from "./Select";
7 | import Input from "./Input";
8 | import Toggle from "./Toggle";
9 |
10 | const ConfigPanel = () => {
11 | const [configMap, setConfigMap] = createStore<{
12 | [key in keyof (HTMLtoJSXConfig & { prefixSVGIds?: string })]: {
13 | type: "input" | "checkbox" | "select";
14 | name: string;
15 | value: string | boolean;
16 | tooltip?: boolean;
17 | options?: string[];
18 | disabled?: boolean;
19 | disables?: { key: string; isValue: string | boolean }[];
20 | filter?: RegExp;
21 | placeholder?: string;
22 | maskType?: "character-count";
23 | };
24 | }>({
25 | attributeValueString: {
26 | type: "checkbox",
27 | name: "Attribute Value String",
28 | value: store.config.attributeValueString!,
29 | },
30 | camelCaseAttributes: {
31 | type: "checkbox",
32 | name: "Camel Case Attributes",
33 | value: store.config.camelCaseAttributes!,
34 | },
35 | styleAttribute: {
36 | type: "select",
37 | name: "Style Attribute",
38 | options: ["css-object", "css-string"],
39 | value: store.config.styleAttribute!,
40 | },
41 | wrapperNode: {
42 | type: "select",
43 | name: "Wrapper Node",
44 | options: ["none", "div", "fragment"],
45 | value: store.config.wrapperNode!,
46 | },
47 | component: {
48 | type: "select",
49 | name: "Component",
50 | options: ["arrow-function", "function", "none"],
51 | disables: [
52 | { key: "componentName", isValue: "none" },
53 | { key: "exportComponent", isValue: "none" },
54 | ],
55 | value: store.config.component!,
56 | },
57 | componentName: {
58 | type: "input",
59 | name: "Component Name",
60 | disabled: store.config.component === "none",
61 | filter: /\s/g,
62 | value: store.config.componentName!,
63 | },
64 | preTagWrapTemplateLiterals: {
65 | type: "checkbox",
66 | name: " tag use template literals",
67 | value: store.config.preTagWrapTemplateLiterals!,
68 | },
69 | stripStyleTag: {
70 | type: "checkbox",
71 | name: "Remove
56 | `;
57 | }
58 |
59 | function getJSXText() {
60 | return `
61 | {/* Solid is solid */}
62 | SolidJSX
63 |
64 |
65 |
73 |
80 | `;
81 | }
82 |
--------------------------------------------------------------------------------
/src/utils/hasNonOverlayScrollbarY.ts:
--------------------------------------------------------------------------------
1 | export const hasNonOverlayScrollbarY = (el: HTMLElement) => {
2 | const { offsetWidth, clientWidth } = el;
3 | if (clientWidth === 0) return false;
4 |
5 | return clientWidth !== offsetWidth;
6 | };
7 |
--------------------------------------------------------------------------------
/src/utils/onTransitionend.ts:
--------------------------------------------------------------------------------
1 | export const onTransitionend = (el: HTMLElement, cb: () => void) => {
2 | el.addEventListener(
3 | "transitionend",
4 | (e) => {
5 | if (e.currentTarget !== e.target) return;
6 | cb();
7 | },
8 | { once: true }
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/src/utils/reflow.ts:
--------------------------------------------------------------------------------
1 | export const reflow = () => document.body.clientWidth;
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowSyntheticDefaultImports": true,
4 | "esModuleInterop": true,
5 | "target": "ESNext",
6 | "module": "ESNext",
7 | "moduleResolution": "node",
8 | "jsxImportSource": "solid-js",
9 | "jsx": "preserve",
10 | "strict": true,
11 | "types": ["solid-start/env"],
12 | "baseUrl": "./",
13 | "paths": {
14 | "~/*": ["./src/*"]
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/unocss.config.ts:
--------------------------------------------------------------------------------
1 | import { presetWind, theme } from "@unocss/preset-wind";
2 | import {
3 | transformerDirectives,
4 | defineConfig,
5 | transformerVariantGroup,
6 | } from "unocss";
7 |
8 | const parseValue = (value: string) => {
9 | return value.replace(/_/g, " ");
10 | };
11 | // mask-image-[linear-gradient(135deg,#000_calc(50%_-_1px),transparent_calc(50%_-_1px))]
12 | export default defineConfig({
13 | rules: [
14 | [
15 | /^bg-image-\[(.+)\]$/,
16 | ([_, d]) => ({ "background-image": parseValue(d) }),
17 | ],
18 | [/^transition-prop-\[(.+)\]$/, ([_, d]) => ({ transition: parseValue(d) })],
19 | [
20 | /^mask-image-\[(.+)\]$/,
21 | ([_, d]) => ({
22 | "-webkit-mask-image": parseValue(d),
23 | "mask-image": parseValue(d),
24 | }),
25 | ],
26 | ],
27 | theme: {
28 | breakpoints: {
29 | ...theme.breakpoints,
30 | md: "850px",
31 | },
32 | colors: {
33 | brand: {
34 | default: "#2c4f7c",
35 | dark: "#335d92",
36 | medium: "#446b9e",
37 | light: "#4f88c6",
38 | },
39 | solid: {
40 | default: "#2c4f7c",
41 | darkbg: "#222222",
42 | darkLighterBg: "#444444",
43 | darkdefault: "#b8d7ff",
44 | darkgray: "#252525",
45 | gray: "#414042",
46 | mediumgray: "#9d9d9d",
47 | lightgray: "#f3f5f7",
48 | dark: "#07254A",
49 | medium: "#446b9e",
50 | light: "#4f88c6",
51 | accent: "#0cdc73",
52 | secondaccent: "#0dfc85",
53 | },
54 | other: "#1e1e1e",
55 | },
56 | fontFamily: {
57 | sans: "Gordita, " + theme.fontFamily!.sans,
58 | },
59 | },
60 | presets: [presetWind()],
61 | transformers: [transformerDirectives(), transformerVariantGroup()],
62 | });
63 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import solid from "solid-start/vite";
2 | import { defineConfig } from "vite";
3 | import UnoCss from "unocss/vite";
4 |
5 | export default defineConfig({
6 | base: "/html-to-solidjsx/",
7 | optimizeDeps: {
8 | // Add both @codemirror/state and @codemirror/view to included deps to optimize
9 | include: ["@codemirror/state", "@codemirror/view"],
10 | },
11 | plugins: [
12 | solid({
13 | adapter: "solid-start-static",
14 | }),
15 | UnoCss(),
16 | ],
17 | });
18 |
--------------------------------------------------------------------------------
3 |