Skip to content

Commit

Permalink
Fixes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@thesoftwarephilosopher
thesoftwarephilosopher committed Aug 22, 2024
1 parent ba7d430 commit 8e52efb
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 92 deletions.
78 changes: 78 additions & 0 deletions site/jsxlib.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
export function jsxlib() {
return `
declare namespace JSX {
type EventHandler<T extends Event> = (e: T) => any;
export type ElementAttrs = {
[attr: string]: string | boolean | EventHandler<any>;
id?: string;
class?: string;
style?: string;
title?: string;
innerHTML?: string;
hidden?: boolean;
onclick?: string | EventHandler<MouseEvent>,
onmousedown?: string | EventHandler<MouseEvent>,
onmouseenter?: string | EventHandler<MouseEvent>,
onmouseleave?: string | EventHandler<MouseEvent>,
onmousemove?: string | EventHandler<MouseEvent>,
onmouseover?: string | EventHandler<MouseEvent>,
onmouseup?: string | EventHandler<MouseEvent>,
oninput?: string | EventHandler<Event>,
onchange?: string | EventHandler<Event>,
onkeydown?: string | EventHandler<KeyboardEvent>,
onkeyup?: string | EventHandler<KeyboardEvent>,
onload?: string | EventHandler<Event>,
};
export type HtmlAttrs = { lang?: string };
export type AnchorAttrs = ElementAttrs & { href?: string; rel?: 'noopener'; target?: string };
export type MetaAttrs = { 'http-equiv'?: string; content?: string; name?: string; charset?: string; property?: string; };
export type LinkAttrs = { href?: string } & (
{ rel?: 'stylesheet' } |
{ rel?: 'icon'; type?: string; sizes?: string } |
{ rel?: 'apple-touch-icon'; sizes?: string } |
{ rel?: 'preload'; as?: 'font'; type?: 'font/woff'; crossorigin?: boolean } |
{ rel?: 'manifest' });
export type ScriptAttrs = ElementAttrs & { type?: 'module'; src?: string };
export type ImgAttrs = ElementAttrs & { src?: string; loading?: 'lazy', alt?: '' };
export type FormAttrs = ElementAttrs & { method?: string; action?: string };
export type ButtonAttrs = ElementAttrs & { type?: string };
export type InputAttrs = ElementAttrs & { type?: string; name?: string; value?: string; checked?: boolean; autofocus?: boolean; placeholder?: string; autocomplete?: string };
export type TextAreaAttrs = ElementAttrs & { name?: string; rows?: string };
export type SelectAttrs = ElementAttrs & { name?: string };
export type OptionAttrs = ElementAttrs & { value?: string; selected?: boolean };
export type OptgroupAttrs = ElementAttrs & { label?: string };
export type IFrameAttrs = ElementAttrs & { src?: string; allowfullscreen?: boolean | 'allowfullscreen' | ''; width?: string; height?: string; frameborder?: string; loading?: 'lazy'; allow?: string };
export type SvgAttrs = ElementAttrs & { viewBox?: string; height?: string };
export type PathAttrs = ElementAttrs & { d?: string };
type IntrinsicElements = {
[tag: string]: Record<string, string | boolean | Function>;
html: HtmlAttrs, head: ElementAttrs, body: ElementAttrs, title: {},
meta: MetaAttrs, link: LinkAttrs, script: ScriptAttrs, iframe: IFrameAttrs, style: {},
a: AnchorAttrs, b: ElementAttrs, i: ElementAttrs, span: ElementAttrs, em: ElementAttrs, small: ElementAttrs,
img: ImgAttrs, hr: ElementAttrs, br: ElementAttrs,
div: ElementAttrs, p: ElementAttrs, blockquote: ElementAttrs, li: ElementAttrs, ul: ElementAttrs, ol: ElementAttrs,
header: ElementAttrs, footer: ElementAttrs, main: ElementAttrs, section: ElementAttrs, aside: ElementAttrs, nav: ElementAttrs, details: ElementAttrs, summary: ElementAttrs,
form: FormAttrs, button: ButtonAttrs, input: InputAttrs, textarea: TextAreaAttrs, select: SelectAttrs, option: OptionAttrs, label: ElementAttrs, optgroup: OptgroupAttrs,
h1: ElementAttrs, h2: ElementAttrs, h3: ElementAttrs, h4: ElementAttrs, h5: ElementAttrs, h6: ElementAttrs,
svg: SvgAttrs, path: PathAttrs,
};
export type Element = HTMLElement | SVGElement | DocumentFragment | string;
export type Component<T extends Record<string, any> = {}> = (attrs: T, children: any) => Element;
}
`.trim();
}
80 changes: 1 addition & 79 deletions site/load-samples.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import monaco from '@imlib/monaco-esm';
import type monacoTypes from 'monaco-editor';
import { jsxlib } from './jsxlib.js';
import { setupTheme } from './theme.js';
import { rules, tokenProvider } from './token-provider.js';
import { Mod, modules } from './vanillajsx/compiler.js';
Expand Down Expand Up @@ -64,82 +65,3 @@ function throttled(ms: number, fn: () => void) {
timer = setTimeout(fn, ms);
};
}

function jsxlib() {
return `
declare namespace JSX {
type EventHandler<T extends Event> = (e: T) => any;
export type ElementAttrs = {
[attr: string]: string | boolean | EventHandler<any>;
id?: string;
class?: string;
style?: string;
title?: string;
innerHTML?: string;
hidden?: boolean;
onclick?: string | EventHandler<MouseEvent>,
onmousedown?: string | EventHandler<MouseEvent>,
onmouseenter?: string | EventHandler<MouseEvent>,
onmouseleave?: string | EventHandler<MouseEvent>,
onmousemove?: string | EventHandler<MouseEvent>,
onmouseover?: string | EventHandler<MouseEvent>,
onmouseup?: string | EventHandler<MouseEvent>,
oninput?: string | EventHandler<Event>,
onchange?: string | EventHandler<Event>,
onkeydown?: string | EventHandler<KeyboardEvent>,
onkeyup?: string | EventHandler<KeyboardEvent>,
onload?: string | EventHandler<Event>,
};
export type HtmlAttrs = { lang?: string };
export type AnchorAttrs = ElementAttrs & { href?: string; rel?: 'noopener'; target?: string };
export type MetaAttrs = { 'http-equiv'?: string; content?: string; name?: string; charset?: string; property?: string; };
export type LinkAttrs = { href?: string } & (
{ rel?: 'stylesheet' } |
{ rel?: 'icon'; type?: string; sizes?: string } |
{ rel?: 'apple-touch-icon'; sizes?: string } |
{ rel?: 'preload'; as?: 'font'; type?: 'font/woff'; crossorigin?: boolean } |
{ rel?: 'manifest' });
export type ScriptAttrs = ElementAttrs & { type?: 'module'; src?: string };
export type ImgAttrs = ElementAttrs & { src?: string; loading?: 'lazy', alt?: '' };
export type FormAttrs = ElementAttrs & { method?: string; action?: string };
export type ButtonAttrs = ElementAttrs & { type?: string };
export type InputAttrs = ElementAttrs & { type?: string; name?: string; value?: string; checked?: boolean; autofocus?: boolean; placeholder?: string; autocomplete?: string };
export type TextAreaAttrs = ElementAttrs & { name?: string; rows?: string };
export type SelectAttrs = ElementAttrs & { name?: string };
export type OptionAttrs = ElementAttrs & { value?: string; selected?: boolean };
export type OptgroupAttrs = ElementAttrs & { label?: string };
export type IFrameAttrs = ElementAttrs & { src?: string; allowfullscreen?: boolean | 'allowfullscreen' | ''; width?: string; height?: string; frameborder?: string; loading?: 'lazy'; allow?: string };
export type SvgAttrs = ElementAttrs & { viewBox?: string; height?: string };
export type PathAttrs = ElementAttrs & { d?: string };
type IntrinsicElements = {
[tag: string]: Record<string, string | boolean | Function>;
html: HtmlAttrs, head: ElementAttrs, body: ElementAttrs, title: {},
meta: MetaAttrs, link: LinkAttrs, script: ScriptAttrs, iframe: IFrameAttrs, style: {},
a: AnchorAttrs, b: ElementAttrs, i: ElementAttrs, span: ElementAttrs, em: ElementAttrs, small: ElementAttrs,
img: ImgAttrs, hr: ElementAttrs, br: ElementAttrs,
div: ElementAttrs, p: ElementAttrs, blockquote: ElementAttrs, li: ElementAttrs, ul: ElementAttrs, ol: ElementAttrs,
header: ElementAttrs, footer: ElementAttrs, main: ElementAttrs, section: ElementAttrs, aside: ElementAttrs, nav: ElementAttrs, details: ElementAttrs, summary: ElementAttrs,
form: FormAttrs, button: ButtonAttrs, input: InputAttrs, textarea: TextAreaAttrs, select: SelectAttrs, option: OptionAttrs, label: ElementAttrs, optgroup: OptgroupAttrs,
h1: ElementAttrs, h2: ElementAttrs, h3: ElementAttrs, h4: ElementAttrs, h5: ElementAttrs, h6: ElementAttrs,
svg: SvgAttrs, path: PathAttrs,
};
export type Element = HTMLElement | SVGElement | DocumentFragment | string;
export type Component<T extends Record<string, any> = {}> = (attrs: T, children: any) => Element;
}
`.trim();
}
36 changes: 23 additions & 13 deletions site/monarch/monarch-playground.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
import monaco from '@imlib/monaco-esm';
import { jsxlib } from '../jsxlib.js';
import { setupTheme } from '../theme.js';
import { rules } from '../token-provider.js';

setupTheme(rules);

// monaco.languages.typescript.typescriptDefaults.addExtraLib(jsxlib(), `ts:filename/jsx.d.ts`);
monaco.languages.typescript.typescriptDefaults.addExtraLib(jsxlib(), `ts:filename/jsx.d.ts`);
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
jsx: monaco.languages.typescript.JsxEmit.ReactNative,
target: monaco.languages.typescript.ScriptTarget.ESNext,
});

const root = document.getElementById('root') as HTMLDivElement;
setupTheme(rules);

const file1 = await fetch('/token-provider.ts').then(res => res.text());
const file2 = await fetch('/monarch/samplecode.tsx').then(res => res.text());

const model1 = monaco.editor.createModel(file1, 'javascript', monaco.Uri.parse('ts:filename/file1.js'));
const model2 = monaco.editor.createModel(file2, 'typescript', monaco.Uri.parse('ts:filename/file2.tsx'));

const editorContainer1 = <div /> as HTMLDivElement;
const editorContainer2 = <div /> as HTMLDivElement;

root.append(editorContainer1);
root.append(editorContainer2);
document.getElementById('root')?.append(<>
{editorContainer1}
{editorContainer2}
</>);

const editor1 = monaco.editor.create(editorContainer1, {
lineNumbers: 'off',
Expand All @@ -29,8 +33,7 @@ const editor1 = monaco.editor.create(editorContainer1, {
guides: { indentation: false },
folding: false,
theme: "vsc2",
value: file1,
language: 'javascript',
model: model1,
scrollBeyondLastLine: false,
renderLineHighlightOnlyWhenFocus: true,
tabSize: 2,
Expand All @@ -44,8 +47,7 @@ const editor2 = monaco.editor.create(editorContainer2, {
guides: { indentation: false },
folding: false,
theme: "vsc2",
value: file2,
language: 'typescript',
model: model2,
scrollBeyondLastLine: false,
renderLineHighlightOnlyWhenFocus: true,
tabSize: 2,
Expand All @@ -54,10 +56,10 @@ const editor2 = monaco.editor.create(editorContainer2, {
editor1.layout({ width: 700, height: 1200 });
editor2.layout({ width: 700, height: 1200 });

updateTokenProvider();
editor1.onDidChangeModelContent(updateTokenProvider);
_updateTokenProvider();
editor1.onDidChangeModelContent(throttle(200, _updateTokenProvider));

async function updateTokenProvider() {
async function _updateTokenProvider() {
const code = editor1.getModel()!.getValue();
const blob = new Blob([code], { type: 'text/javascript' });
const url = URL.createObjectURL(blob);
Expand All @@ -71,3 +73,11 @@ async function updateTokenProvider() {
window.onbeforeunload = (e) => {
if (!confirm('Lose progress!?')) e.preventDefault();
}

function throttle(ms: number, fn: () => void) {
let timer: any;
return () => {
clearTimeout(timer);
timer = setTimeout(fn, ms);
};
}

0 comments on commit 8e52efb

Please sign in to comment.