Skip to content

Commit

Permalink
chore(highlight): improve demo
Browse files Browse the repository at this point in the history
  • Loading branch information
riccardoperra committed Oct 4, 2022
1 parent ee9cd5c commit 003e9ea
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 80 deletions.
1 change: 1 addition & 0 deletions packages/highlight/dev/Editor/Editor.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ export const editor = style({
color: colorVar,
padding: themeVars.spacing['4'],
borderRadius: themeVars.borderRadius.lg,
overflowY: 'auto',
});
6 changes: 3 additions & 3 deletions packages/highlight/dev/Editor/Editor.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {backgroundColorVar, colorVar} from '@codeimage/ui';
import {backgroundColorVar, Box, colorVar} from '@codeimage/ui';
import {javascript} from '@codemirror/lang-javascript';
import {Extension} from '@codemirror/state';
import {EditorView} from '@codemirror/view';
Expand Down Expand Up @@ -60,7 +60,7 @@ export default function Editor(props: VoidProps<CustomEditorPreviewProps>) {
createEffect(on(extensions, extensions => reconfigure(extensions)));

return (
<div
<Box
class={editor}
style={assignInlineVars({
[backgroundColorVar]: props.theme.properties.terminal.main,
Expand All @@ -75,6 +75,6 @@ export default function Editor(props: VoidProps<CustomEditorPreviewProps>) {
});
}}
/>
</div>
</Box>
);
}
183 changes: 126 additions & 57 deletions packages/highlight/dev/Editor/preview.ts
Original file line number Diff line number Diff line change
@@ -1,60 +1,129 @@
import prettier from 'prettier';
import tsParser from 'prettier/parser-typescript';

export const PREVIEW_CODE = prettier.format(
`
@decorator({
property: 'test'
})
class Test {
private readonly property: string = '';
readonly property2: number[] = [1, 2, 3];
constructor(
private readonly property3: symbol
) {
super();
}
get getter() {
return this.property;
}
method(): void {
return this.property2.map(el => el * 2);
}
}
function Counter() {
const [count, setCount] = createSignal(0);
const increment = () => setCount(count => count + 1);
return (
<button type='button' onClick={increment}>
{count()}
</button>
);
}
enum Enum {
0,
1,
3,
4 = '4',
5 = '5'
}
interface User {
username: string;
firstName?: string;
lastName: string;
}
type BaseUser = Pick<User, 'firstName' | 'lastName'>;
`,
{
parser: 'typescript',
plugins: [tsParser],
},
);
export const PREVIEW_CODE =
'var globalVar;\n' +
'/**\n' +
' * Constructor for AjaxRequest class\n' +
' * @param {string} url the url for the request<p/>\n' +
' */\n' +
'function AjaxRequest(url) {\n' +
' function local() {}\n' +
' var urls = [ "www.cnn.com", 5, globalVar];\n' +
' this.request = new XMLHttpRequest();\n' +
' url = url.replace(/^\\s*(.*)/, "$1"); // skip leading whitespace\n' +
' /* check the url to be in urls */\n' +
' this.foo = new function() {};\n' +
' foo();\n' +
' var hello = () => console.log("hello")}\n' +
'\n' +
'@decorator()\n' +
'class NameClass {\n' +
'}\n' +
'declare module name{\n' +
' declare export var exportedVar: string;\n' +
' declare export function exportedFunction(): void;\n' +
' declare export class ExportedClass {}\n' +
'}\n' +
'interface MyInterface { }\n' +
'type FooBarAlias = string;\n' +
"var html =`<div title='HTML injection'>Injected language fragment</div>`;\n" +
'var x: MyInterface, y: string, z: FooBarAlias;\n' +
'module ModuleValidator {\n' +
' import checkChars = CharUtils.notWhiteSpace;\n' +
' export interface HasValidator<T> {\n' +
' validateValue():Boolean;\n' +
' }\n' +
'\n' +
' type FooBarAlias = string;\n' +
'\n' +
' @decorator()\n' +
' class HasValidator implements HasValidator<String> {\n' +
' /* Processed values */\n' +
' static validatedValue:Array<String> = ["", "aa"];\n' +
' private myValue:String;\n' +
'\n' +
' /**\n' +
' * Constructor for class\n' +
' * @param valueParameter Value for <i>validation</i>\n' +
' */\n' +
' constructor(valueParameter: String) {\n' +
' this.myValue = valueParameter;\n' +
' HasValidator.validatedValue.push(value);\n' +
' }\n' +
'\n' +
' public validateValue():Boolean {\n' +
' var resultValue:Boolean = checkChars(this.myValue);\n' +
' return resultValue;\n' +
' }\n' +
'\n' +
' static createInstance(valueParameter: string): HasValidator {\n' +
' return new HasValidator(valueParameter);\n' +
' }\n' +
' }\n' +
'\n' +
' function globalFunction<TypeParameter>(value:TypeParameter) { //global function\n' +
' return 42;\n' +
' }\n' +
' declare var declareUrl;\n' +
' var hello = () => console.log("hello");\n' +
' HasValidator.createInstance(varUrl).validateValue();\n' +
' function acceptsUnion(s: string | number) {\n' +
' if (typeof s === "string") {\n' +
' s\n' +
' }\n' +
' }\n' +
' enum EnumName {\n' +
' EnumMember\n' +
' }}' +
"import _ from 'lodash';\n" +
"export declare interface MyInterface from './myClass';\n" +
'export default MyClass;\n' +
'\n' +
'type MyFoo = MyInterface;\n' +
'type Types = keyof typeof types;\n' +
'\n' +
'class MyType extends AbstractClass {\n' +
' private field: string;\n' +
' protected value: number;\n' +
' public num = 10;\n' +
'\n' +
' static foo(): unknown {}\n' +
' get hello(): any {}\n' +
' set hello(v): void {}\n' +
'\n' +
' method() {\n' +
' var x = 10;\n' +
' this.x = null;\n' +
' if (x === undefined) {\n' +
" console.log('foo');\n" +
" window.alert('foo');\n" +
' debugger;\n' +
' return false;\n' +
' }\n' +
' return true;\n' +
' }\n' +
'\n' +
' async function promise() {\n' +
' try {\n' +
' const res = await myCall();\n' +
' yield 10;\n' +
' } catch (e as Error) {\n' +
' throw new Error("invalid");\n' +
' } finally {\n' +
' for (let elem of array) {\n' +
' if (elem instanceof SomeClass || elem typeof SomeClass) return false;\n' +
' }\n' +
' }\n' +
'\n' +
' return true;\n' +
' }\n' +
'}\n' +
'\n' +
'enum MyEnum {\n' +
' UP = 1,\n' +
' DOWN = 2\n' +
'}\n' +
'\n' +
'export default SomeClass;\n' +
'module.exports = foo;';
18 changes: 14 additions & 4 deletions packages/highlight/dev/index.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,10 @@ export const container = style([
backdropFilter: 'brightness(0.8)',
flexDirection: 'column',
width: '100%',
height: '100%',
paddingLeft: themeVars.spacing['3'],
paddingRight: themeVars.spacing['3'],
marginTop: themeVars.spacing['12'],
marginBottom: themeVars.spacing['12'],
paddingTop: themeVars.spacing['12'],
paddingBottom: themeVars.spacing['12'],
marginLeft: 'auto',
marginRight: 'auto',
'@media': {
Expand All @@ -22,8 +21,19 @@ export const container = style([
},

'screen and (max-width: 768px)': {
marginTop: themeVars.spacing['4'],
paddingTop: themeVars.spacing['4'],
},
},
},
]);

export const editorContainer = style({
display: 'flex',
width: '100%',
height: '100%',
minHeight: '0',
marginLeft: 'auto',
marginRight: 'auto',
flexDirection: 'column',
marginTop: themeVars.spacing['2'],
});
29 changes: 14 additions & 15 deletions packages/highlight/dev/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {createEffect, on} from 'solid-js';
import {render} from 'solid-js/web';
import Editor from './Editor/Editor';
import './global.css';
import {container} from './index.css';
import {container, editorContainer} from './index.css';
import {PREVIEW_CODE} from './Editor/preview';
import './reset.scss';
import {AVAILABLE_THEMES} from './Editor/themes';
Expand All @@ -34,21 +34,20 @@ function App() {
return (
<CodeImageThemeProvider tokens={{}} theme={appTheme()}>
<Box class={container}>
<VStack spacing={'2'}>
<FlexField size={'lg'}>
<FieldLabel>Theme</FieldLabel>
<Select
value={theme().id}
items={AVAILABLE_THEMES.map(theme => ({
label: theme.properties.label,
value: theme.id as string,
}))}
onSelectChange={themeId => setThemeId(themeId as string)}
/>
</FlexField>

<FlexField size={'lg'}>
<FieldLabel>Theme</FieldLabel>
<Select
value={theme().id}
items={AVAILABLE_THEMES.map(theme => ({
label: theme.properties.label,
value: theme.id as string,
}))}
onSelectChange={themeId => setThemeId(themeId as string)}
/>
</FlexField>
<Box class={editorContainer}>
<Editor theme={theme()} code={PREVIEW_CODE} />
</VStack>
</Box>
</Box>
</CodeImageThemeProvider>
);
Expand Down
1 change: 1 addition & 0 deletions packages/highlight/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
"@types/node": "^18.7.13",
"@types/prettier": "^2.7.1",
"@vanilla-extract/css": "^1.9.1",
"@vanilla-extract/dynamic": "^2.0.2",
"chalk": "4.1.2",
"enquirer": "2.3.6",
"rimraf": "^3.0.2",
Expand Down
3 changes: 2 additions & 1 deletion pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 003e9ea

Please sign in to comment.