diff --git a/package.json b/package.json index 3f09009..956050a 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "vite-plugin-solid": "^2.10.2" }, "dependencies": { + "monaco-editor": "^0.50.0", "solid-js": "^1.8.21" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eaf67e7..307f879 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + monaco-editor: + specifier: ^0.50.0 + version: 0.50.0 solid-js: specifier: ^1.8.21 version: 1.8.21 @@ -1002,6 +1005,10 @@ packages: is-what: 4.1.16 dev: true + /monaco-editor@0.50.0: + resolution: {integrity: sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA==} + dev: false + /ms@2.1.2: resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} dev: true diff --git a/src/App.tsx b/src/App.tsx index a41d209..2e9b9ef 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,25 +1,136 @@ -import type { Component } from 'solid-js'; +import { + createEffect, + createRenderEffect, + createSignal, + on, + onCleanup, + type Component, +} from 'solid-js'; -import logo from './logo.svg'; -import styles from './App.module.css'; +import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; +import './userWorker'; + +const initialScript = /* javascript */ `\ +let count = 0 + +const button = document.createElement('button') +const update = () => { + button.textContent = count +} + +button.onclick = () => { + count++ + update() +} + +update() + +document.getElementById('root').appendChild(button) +`; + +const createDoc = (script: string) => { + const scriptUrl = URL.createObjectURL( + new Blob([script], { type: 'application/javascript' }), + ); + + return /* html */ ` + + + + result + + +
+ + + + +`; +}; const App: Component = () => { + const [container, setContainer] = createSignal(); + const [editor, setEditor] = + createSignal(); + + const [value, _setValue] = createSignal( + localStorage.getItem('value') || initialScript, + ); + + const saveValue = (next: ReturnType) => { + localStorage.setItem('value', next); + _setValue(next); + }; + + const setValue = (next: ReturnType) => { + editor()?.setValue(next); + return saveValue(next); + }; + + const reset = () => setValue(initialScript); + + createEffect( + on(container, container => { + if (!container) return; + + const editor = monaco.editor.create(container, { + value: value(), + language: 'javascript', + glyphMargin: false, + folding: false, + lineNumbers: 'off', + padding: { top: 5 }, + minimap: { enabled: false }, + }); + + onCleanup(() => editor.dispose()); + + setEditor(editor); + + editor.onDidChangeModelContent(() => saveValue(editor.getValue())); + }), + ); + + const [doc, setDoc] = createSignal(); + const [track, trigger] = createSignal(void 0, { equals: false }); + createRenderEffect(() => { + track(); + setDoc(createDoc(value())); + }); + + const refresh = () => trigger(); + return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn Solid - -
+
+
+
+ +
+
+
+
+
+ +
+