+ <${ForEach}
+ value=${this.latestPastes}
+ content=${(paste) => html`
+
router.go(`/${paste.id}`)}>
+
+ ${paste.title}
+
+ `}
+ />
+
+
New Project
+
+
+
+
+
publicPastes.value.length, [publicPastes])}>Latest Public Projects
+
+ `
+ }
+
+ styles(): string {
+ // language=SCSS
+ return scss`
+ .home-page {
+ padding: 7px 10px;
+ h2 {
+ margin-bottom: 10px;
+ margin-top: 30px;
+ }
+ .projects {
+ .project {
+ border: 2px solid #FFFFFF33;
+ border-radius: 8px;
+ display: inline-block;
+ text-align: center;
+ padding: 14px;
+ cursor: pointer;
+ width: 200px;
+
+ margin-right: 10px;
+ margin-bottom: 10px;
+
+ i {
+ font-size: 44px;
+ display: block;
+ }
+
+ span {
+ display: block;
+ margin-top: 10px;
+ font-size: 18px;
+ font-family: "Plus Jakarta Sans";
+ }
+
+ &:hover {
+ background: #FFFFFF11;
+ }
+ }
+ }
+ }
+ `;
+ }
+}
\ No newline at end of file
diff --git a/src/views/editor/CodeEditorPart.ts b/src/views/editor/CodeEditorPart.ts
new file mode 100644
index 0000000..ba75114
--- /dev/null
+++ b/src/views/editor/CodeEditorPart.ts
@@ -0,0 +1,152 @@
+import {css, Hook, html, JDOMComponent, state} from 'jdomjs'
+
+import {CustomElement, State} from 'jdomjs/src/decorators.ts'
+
+import { CodeEditor } from 'petrel/index.js'
+import { JavaScriptAutoComplete, DockerfileAutoComplete, HTMLAutoComplete, JSONAutoComplete, JavaAutoComplete, MarkdownAutoComplete, PHPAutoComplete, SQLAutoComplete, YAMLAutoComplete } from 'petrel/autocompletions.js'
+import hljs from 'highlight.js'
+import LANGUAGE_REPLACEMENTS from './langReplacements.ts'
+const LANGUAGES = hljs.listLanguages()
+
+const AUTOCOMPLETIONS = [
+ {language: "javascript", file: JavaScriptAutoComplete},
+ {language: "dockerfile", file: DockerfileAutoComplete},
+ {language: "html", file: HTMLAutoComplete},
+ {language: "json", file: JSONAutoComplete},
+ {language: "java", file: JavaAutoComplete},
+ {language: "markdown", file: MarkdownAutoComplete},
+ {language: "php", file: PHPAutoComplete},
+ {language: "sql", file: SQLAutoComplete},
+ {language: "yaml", file: YAMLAutoComplete},
+]
+const DEFAULT_HIGHLIGHTER = v => v.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'")
+
+@CustomElement("editor-editor-part")
+export default class CodeEditorPart extends JDOMComponent {
+ @State()
+ selected = state
({})
+
+ codeEditor = new CodeEditor(null)
+
+ currentLanguage = ''
+
+ selectListener = null
+
+ timer: number = null
+
+ constructor() {
+ super({
+ shadowed: false
+ });
+ }
+
+ detach() {
+ if (this.timer !== null) {
+ clearInterval(this.timer)
+ }
+ }
+
+ updateEditorLang() {
+ console.log('huh', this.selected.value.name)
+ if (!this.selected.value.name || (this.selected.value.name instanceof Hook))
+ return;
+ let language;
+ const split = this.selected.value.name.split(".")
+ let isHTML = false
+ if (split.length > 1) {
+ language = split[split.length - 1]
+ if (language == "html" || language == "htm")
+ isHTML = true
+
+ for (const name in LANGUAGE_REPLACEMENTS) {
+ if (language == name) {
+ language = LANGUAGE_REPLACEMENTS[name]
+ break;
+ }
+ }
+ } else if (split[0] == 'Dockerfile')
+ language = 'dockerfile'
+
+
+ if (this.currentLanguage != language) {
+ this.currentLanguage = language
+ if (LANGUAGES.includes(language)) {
+ this.codeEditor.setHighlighter(c => hljs.highlight(language, c).value)
+
+ this.codeEditor.setAutoCompleteHandler(null)
+ for (const autocompletion of AUTOCOMPLETIONS) {
+ if (autocompletion.language == language || (autocompletion.language == "html" && isHTML)) {
+ (async () => {
+ this.codeEditor.setAutoCompleteHandler(new autocompletion.file)
+ })()
+ }
+ }
+ }
+ this.codeEditor.update()
+ }
+
+
+ if (this.codeEditor.value.length > 7000) {
+ this.codeEditor.setAutoCompleteHandler(null)
+ if (this.codeEditor.value.length > 11000) {
+ this.codeEditor.setHighlighter(DEFAULT_HIGHLIGHTER)
+ }
+ }
+ }
+
+ dettach() {
+ this.selected.removeListener(this.selectListener)
+ }
+
+ render() {
+ const element = document.createElement('div')
+ this.codeEditor.parentElement = element
+
+ this.selectListener = this.selected.addListener(v => {
+ this.updateEditorLang()
+ if (this.codeEditor.value !== v.contents) {
+ this.codeEditor.setValue(v.contents)
+ }
+ })
+
+ let changed = false
+ this.codeEditor.textAreaElement.addEventListener('keydown', (e: KeyboardEvent) => {
+ if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+ this.dispatchEvent(new CustomEvent('save_paste'))
+ e.stopPropagation()
+ e.preventDefault()
+ }
+ })
+ this.codeEditor.textAreaElement.addEventListener('keyup', e => {
+ this.selected.value.contents = this.codeEditor.value
+ changed = true
+ })
+
+ this.timer = setInterval(() => {
+ if (changed) {
+ this.dispatchEvent(new CustomEvent('changed'))
+ changed = false
+ }
+ }, 1000)
+
+ this.codeEditor.setHighlighter(code => hljs.highlight("javascript", code).value)
+ if (this.selected.value.contents)
+ this.codeEditor.setValue(this.selected.value.contents)
+
+ setTimeout(() => this.codeEditor.update(), 200)
+
+ this.codeEditor.setAutoCompleteHandler(new JavaScriptAutoComplete())
+ this.codeEditor.create()
+ this.updateEditorLang()
+
+ return html`${ element }`
+ }
+
+ styles(): string {
+ return css`
+ .petrel-code-editor {
+ height: calc(100% - 40px);
+ }
+ `;
+ }
+}
\ No newline at end of file
diff --git a/src/views/editor/EditorView.ts b/src/views/editor/EditorView.ts
new file mode 100644
index 0000000..9368af7
--- /dev/null
+++ b/src/views/editor/EditorView.ts
@@ -0,0 +1,519 @@
+import {computed, css, html, JDOMComponent, state} from 'jdomjs'
+
+import {Attribute, CustomElement, State} from 'jdomjs/src/decorators.ts'
+import { Awaiting, ForEach } from 'jdomjs/src/template/helper/components.js'
+import {api, router} from "../../main.ts";
+import { WebContainer } from '@webcontainer/api';
+import {Terminal} from "@xterm/xterm";
+import CodeEditorPart from "./CodeEditorPart.ts";
+import {login, user} from "../../user.ts";
+import configs from "./configs";
+import Logo from "../../components/Logo.ts";
+import UserProfile from "../../components/UserProfile.ts";
+import TopBar from "../../components/TopBar.ts";
+import {scss} from "../../scss.ts";
+
+
+@CustomElement("editor-view")
+export default class EditorView extends JDOMComponent.unshadowed {
+ webContainer: WebContainer
+ frame: HTMLIFrameElement
+ frameURL = state('')
+ files = state([])
+ paste = state({})
+ pasteNameEdit = state('')
+ selectedFile = state({})
+ selectedTabIndex = state(0)
+ previewShown = state(false)
+ fullscreen = state(false)
+
+ terminal: Terminal = new Terminal({
+ convertEol: true,
+ rows: 10,
+ cols: 120,
+ theme: {
+ background: '#161921'
+ }
+ })
+
+ async getPaste(id: string) {
+ console.log('Getting', id)
+ if (id === 'new') {
+ this.pasteNameEdit.value = 'New Paste'
+
+ let newType = router.currentRoute.value?.query?.type || 'html-js-css'
+
+ if (!configs[newType])
+ newType = 'html-js-css'
+
+ const config = configs[newType]
+
+ this.paste.value = { exists: false }
+ this.files.value = config.createNewFiles()
+
+ this.selectedFile.value = {
+ name: this.files.value[0].name,
+ contents: this.files.value[0].contents
+ }
+
+ return {}
+ }
+ const paste = await api.get(`/paste/${id}`)
+
+ const out = {...paste}
+
+ if (paste.type === 'MULTI_PASTE') {
+ out.parts = JSON.parse(paste.content)
+ out.parts.sort((a, b) => {
+ if (b.name === '.codebox') {
+ return -1
+ }
+ if (
+ a.name?.toLowerCase().startsWith('main.') ||
+ a.name?.toLowerCase().startsWith('index.') ||
+ a.name?.toLowerCase().startsWith('myapp.') ||
+ a.name?.toLowerCase().startsWith('app.')
+ ) {
+ if (b.name === 'index.html') {
+ return -2
+ }
+ return -1
+ }
+ return 0
+ })
+ this.files.value = out.parts
+ }
+
+ if (this.files.value[0]) {
+ this.selectedFile.value = {
+ name: this.files.value[0].name,
+ contents: this.files.value[0].contents
+ }
+ }
+
+ this.paste.value = out
+ this.pasteNameEdit.value = out.title
+ }
+
+ getFile(name) {
+ return this.files.value.find(c => c.name === name)
+ }
+
+ async savePaste() {
+ let configFile = this.getFile('.codebox')
+ if (configFile) {
+ try {
+ configFile = JSON.parse(configFile.contents)
+ } catch (e) {}
+ }
+ let configType = `codebox-type-${configFile?.type || 'unknown'}`
+
+ const content = JSON.stringify(this.files.value)
+
+ if (this.paste.value?.id) {
+ await api.put(`/paste/${this.paste.value.id}`, {
+ title: this.pasteNameEdit.value,
+ tags: ['codebox', configType],
+ content
+ })
+ } else {
+ const { paste } = await api.post(`/paste`, {
+ title: this.pasteNameEdit.value,
+ type: 'MULTI_PASTE',
+ tags: ['codebox', configType],
+ content
+ })
+
+ this.paste.value = paste
+ window.history.pushState(`/${paste.id}`, `/${paste.id}`, `/${paste.id}`)
+ }
+ }
+
+ async initWebContainer() {
+ this.webContainer?.teardown()
+
+ console.log('STARTING WEBCONTAINER')
+ this.webContainer = await WebContainer.boot();
+ this.webContainer.on('error', e => {
+ alert('Web-Containers do not work here. See a tutorial on how to enable them them https://webcontainers.io/guides/browser-config')
+ })
+
+ for (const {name, contents} of this.files.value) {
+ await this.webContainer.fs.writeFile(name, contents)
+ }
+
+ this.webContainer.on('server-ready', (port, url) => {
+ this.previewShown.value = true
+ console.log('server ready', url, port)
+ this.frame.src = url
+ this.frameURL.value = url
+ });
+
+
+ ;(async () => {
+ const sh = await this.webContainer.spawn("sh")
+ sh.output.pipeTo(new WritableStream({
+ write: (data) => {
+ this.terminal.write(data)
+ }
+ }));
+
+ const input = sh.input.getWriter();
+ this.terminal.onData((data) => {
+ input.write(data);
+ });
+
+ const configFile = this.files.value.find(s => s.name === '.codebox')?.contents
+ if (configFile) {
+ const config = JSON.parse(configFile)
+
+ configs[config.type]?.initContainer(config, this.files.value, sh, this.webContainer, input)
+ }
+ })().then(r => null);
+ }
+
+ selectFile(index: number) {
+ this.saveCurrent()
+ this.selectedTabIndex.value = index
+ this.selectedFile.value = {
+ name: this.files.value[index].name,
+ contents: this.files.value[index].contents,
+ }
+ }
+
+ detach() {
+ console.log('REMOVING CONTAINER')
+ this.webContainer?.teardown()
+ }
+
+ removeFile(index: number) {
+ this.files.value = this.files.value.filter((_, i) => i !== index)
+ this.webContainer?.fs?.rm(this.files.value[index].name)
+
+ if (this.selectedTabIndex.value === index) {
+ this.selectFile((index - 1) || 0)
+ }
+ }
+
+ saveCurrent() {
+ if (this.selectedFile.value.name) {
+ this.webContainer?.fs?.writeFile(this.selectedFile.value.name, this.selectedFile.value.contents)
+ }
+ }
+
+ fork() {
+ this.paste.value = null
+ window.history.pushState('/new', '/new', '/new')
+ }
+
+ render() {
+ this.frame = document.createElement('iframe')
+ const termDiv = document.createElement('div')
+ termDiv.classList.add('terminal')
+ this.terminal.open(termDiv)
+
+ this.selectedFile.addListener(v => {
+ this.files.value[this.selectedTabIndex.value] = v
+ })
+
+ this.getPaste(router.currentRoute.value.params.paste)
+ .then(() => this.initWebContainer())
+
+ return html`
+
+
+ <${Logo} />
+
+
+
+
+
+
+
+ ${computed(() => user.value?.id === this.paste.value.user_id || !this.paste.value.exists
+ ? html`
+ `
+ : null,
+ [this.paste, user])}
+
+
+ <${UserProfile} />
+
+
+
this.previewShown.value ? 'auto 25%' : 'auto', [this.previewShown])}}>
+
+
+
+
+ <${ForEach}
+ value=${this.files}
+ content=${({name, contents}, index) => html`
+
+ `}
+ />
+
+
+
+
+ <${CodeEditorPart}
+ selected=${this.selectedFile}
+ @changed=${() => this.saveCurrent()}
+ @save_paste=${() => this.savePaste()}
+ />
+
+
+
+ this.frame.src = `${this.frame.src}`}
+ />
+ e.key === 'Enter' ? this.frame.src = this.frameURL.value : null}
+ >
+ !this.fullscreen.value, [this.fullscreen]),
+ "icon-button": true
+ }}
+ @click=${() => this.fullscreen.value = !this.fullscreen.value}
+ />
+
+ ${this.frame}
+
+
+
+ ${termDiv}
+
+
Hi
+
+
+
+`
+ },
+ {
+ name: 'index.js',
+ contents: `document.querySelector('h1').textContent = 'Hello World!'`
+ },
+ {
+ name: 'styles.css',
+ contents: `* {
+ font-family: sans-serif;
+ margin: 0;
+ padding: 0;
+}`
+ },
+ {
+ name: '.codebox',
+ contents: `{
+ "type": "javascript-web"
+}`
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/views/editor/configs/index.ts b/src/views/editor/configs/index.ts
new file mode 100644
index 0000000..d2749c6
--- /dev/null
+++ b/src/views/editor/configs/index.ts
@@ -0,0 +1,23 @@
+import javascriptWeb from "./javascript-web.ts";
+import typescriptWeb from "./typescript-web.ts";
+import typescriptCli from "./typescript-cli.ts";
+import javascriptCli from "./javascript-cli.ts";
+import htmlJsCss from "./html-js-css.ts";
+import vue from "./vue.ts";
+import react from "./react.ts";
+import jdomTemplateApp from "./jdom-template-app.ts";
+import svelte from "./svelte.ts";
+import jdomTemplateTsApp from "./jdom-template-ts-app.ts";
+
+export default {
+ 'html-js-css': htmlJsCss,
+ 'javascript-web': javascriptWeb,
+ 'typescript-web': typescriptWeb,
+ 'vue': vue,
+ 'react': react,
+ 'svelte': svelte,
+ 'jdom-template-app': jdomTemplateApp,
+ 'jdom-template-ts-app': jdomTemplateTsApp,
+ 'javascript-cli': javascriptCli,
+ 'typescript-cli': typescriptCli,
+}
diff --git a/src/views/editor/configs/javascript-cli.ts b/src/views/editor/configs/javascript-cli.ts
new file mode 100644
index 0000000..884fa66
--- /dev/null
+++ b/src/views/editor/configs/javascript-cli.ts
@@ -0,0 +1,26 @@
+import {WebContainer, WebContainerProcess} from "@webcontainer/api";
+import {htmlBody, mergePackageJSON} from "./helper.ts";
+
+export default {
+ name: 'Typescript-CLI',
+ icon: 'brand-javascript',
+ descriptions: ``,
+ async initContainer(config: any, files: any[], sh: WebContainerProcess, webContainer: WebContainer, input: WritableStreamDefaultWriter) {
+ await webContainer.fs.writeFile('package.json', JSON.stringify(await mergePackageJSON({}, webContainer)))
+
+ await input.write(`npm install && node ${config.main || 'app.js'}\n`)
+ },
+ createNewFiles: () => [
+ {
+ name: 'main.js',
+ contents: `console.log('Hello World')`
+ },
+ {
+ name: '.codebox',
+ contents: `{
+ "type": "javascript-cli",
+ "main": "main.js"
+}`
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/views/editor/configs/javascript-web.ts b/src/views/editor/configs/javascript-web.ts
new file mode 100644
index 0000000..7607358
--- /dev/null
+++ b/src/views/editor/configs/javascript-web.ts
@@ -0,0 +1,55 @@
+import {WebContainer, WebContainerProcess} from "@webcontainer/api";
+
+export default {
+ name: 'Typescript-Web',
+ icon: 'brand-javascript',
+ descriptions: ``,
+ async initContainer(config: any, files: any[], sh: WebContainerProcess, webContainer: WebContainer, input: WritableStreamDefaultWriter) {
+ if (!files.find(f => f.name === 'index.html')) {
+ await webContainer.fs.writeFile('index.html', `
+
+
+
+
+
+
+ Pastefy-Codebox
+
+
+
+
+
+ `)
+ }
+
+ await webContainer.fs.writeFile('package.json', JSON.stringify({
+ "name": "testvite1",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "devDependencies": {
+ "vite": "^5.1.4"
+ }
+ }))
+
+ await input.write('npm install && npm run dev\n')
+ },
+ createNewFiles: () => [
+ {
+ name: 'main.js',
+ contents: `document.body.appendChild(document.createTextNode('Hello World!'))`
+ },
+ {
+ name: '.codebox',
+ contents: `{
+ "type": "javascript-web",
+ "main": "main.js"
+}`
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/views/editor/configs/jdom-template-app.ts b/src/views/editor/configs/jdom-template-app.ts
new file mode 100644
index 0000000..2e5ce29
--- /dev/null
+++ b/src/views/editor/configs/jdom-template-app.ts
@@ -0,0 +1,86 @@
+import {WebContainer, WebContainerProcess} from "@webcontainer/api";
+
+export default {
+ name: 'JDOM-Template',
+ icon: 'letter-j-small',
+ descriptions: ``,
+ async initContainer(config: any, files: any[], sh: WebContainerProcess, webContainer: WebContainer, input: WritableStreamDefaultWriter) {
+ if (!files.find(f => f.name === 'index.html')) {
+ await webContainer.fs.writeFile('index.html', `
+
+
+
+
+
+
+ Pastefy-Codebox
+
+
+
+
+
+ `)
+ }
+
+ await webContainer.fs.writeFile('package.json', JSON.stringify({
+ "name": "testvite1",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "jdomjs": "3.1.11"
+ },
+ "devDependencies": {
+ "vite": "^5.1.4"
+ }
+ }))
+
+ await input.write('npm install && npm run dev\n')
+ },
+ createNewFiles: () => [
+ {
+ name: 'MyApp.js',
+ contents: `import { html, css, JDOMComponent, $r, state } from 'jdomjs'
+
+export default class MyApp extends JDOMComponent {
+ count = state(0)
+
+ render() {
+ return html\`
+ My JDOM App
+
+ \`
+ }
+
+ styles() {
+ return css\`
+ * {
+ font-family: sans-serif
+ }
+ \`
+ }
+}
+
+$r('my-app', MyApp)`
+ },
+ {
+ name: 'main.js',
+ contents: `import { html } from 'jdomjs'
+import MyApp from './MyApp.js'
+
+html\`<\${MyApp} />\`.appendTo(document)`
+ },
+ {
+ name: '.codebox',
+ contents: `{
+ "type": "jdom-template-app",
+ "main": "main.js"
+}`
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/views/editor/configs/jdom-template-ts-app.ts b/src/views/editor/configs/jdom-template-ts-app.ts
new file mode 100644
index 0000000..dc65cc9
--- /dev/null
+++ b/src/views/editor/configs/jdom-template-ts-app.ts
@@ -0,0 +1,79 @@
+import {WebContainer, WebContainerProcess} from "@webcontainer/api";
+import {createTSConfig, htmlBody} from "./helper.ts";
+
+export default {
+ name: 'JDOM-Template TS',
+ icon: 'letter-j-small',
+ descriptions: ``,
+ async initContainer(config: any, files: any[], sh: WebContainerProcess, webContainer: WebContainer, input: WritableStreamDefaultWriter) {
+ if (!files.find(f => f.name === 'index.html')) {
+ await webContainer.fs.writeFile('index.html', htmlBody(``))
+ }
+
+ if (!files.find(f => f.name === 'tsconfig.json')) {
+ await webContainer.fs.writeFile('tsconfig.json', createTSConfig())
+ }
+
+ await webContainer.fs.writeFile('package.json', JSON.stringify({
+ "name": "testvite1",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "jdomjs": "3.1.11"
+ },
+ "devDependencies": {
+ "typescript": "^5.2.2",
+ "vite": "^5.1.4"
+ }
+ }))
+
+ await input.write('npm install && npm run dev\n')
+ },
+ createNewFiles: () => [
+ {
+ name: 'MyApp.ts',
+ contents: `import { html, css, JDOMComponent, $r, state } from 'jdomjs'
+import { CustomElement } from 'jdomjs/src/decorators.ts'
+
+@CustomElement('my-app')
+export default class MyApp extends JDOMComponent {
+ count = state(0)
+
+ render() {
+ return html\`
+ My JDOM App
+
+ \`
+ }
+
+ styles() {
+ return css\`
+ * {
+ font-family: sans-serif
+ }
+ \`
+ }
+}`
+ },
+ {
+ name: 'main.ts',
+ contents: `import { html } from 'jdomjs'
+import MyApp from './MyApp.ts'
+
+html\`<\${MyApp} />\`.appendTo(document)`
+ },
+ {
+ name: '.codebox',
+ contents: `{
+ "type": "jdom-template-ts-app",
+ "main": "main.ts"
+}`
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/views/editor/configs/react.ts b/src/views/editor/configs/react.ts
new file mode 100644
index 0000000..7948364
--- /dev/null
+++ b/src/views/editor/configs/react.ts
@@ -0,0 +1,143 @@
+import {WebContainer, WebContainerProcess} from "@webcontainer/api";
+
+export default {
+ name: 'React',
+ icon: 'brand-react',
+ descriptions: ``,
+ async initContainer(config: any, files: any[], sh: WebContainerProcess, webContainer: WebContainer, input: WritableStreamDefaultWriter) {
+ if (!files.find(f => f.name === 'index.html')) {
+ await webContainer.fs.writeFile('index.html', `
+
+
+
+
+
+
+ Pastefy-Codebox
+
+
+
+
+
+
+ `)
+ }
+ if (!files.find(f => f.name === 'vite.config.js')) {
+ await webContainer.fs.writeFile('vite.config.js', `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+})`)
+ }
+ if (!files.find(f => f.name === '.eslint.cjs')) {
+ await webContainer.fs.writeFile('.eslint.cjs', `module.exports = {
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:react/recommended',
+ 'plugin:react/jsx-runtime',
+ 'plugin:react-hooks/recommended',
+ ],
+ ignorePatterns: ['dist', '.eslintrc.cjs'],
+ parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+ settings: { react: { version: '18.2' } },
+ plugins: ['react-refresh'],
+ rules: {
+ 'react/jsx-no-target-blank': 'off',
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ },
+}`)
+ }
+
+ await webContainer.fs.writeFile('package.json', JSON.stringify({
+ "name": "testvite1",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.56",
+ "@types/react-dom": "^18.2.19",
+ "@vitejs/plugin-react": "^4.2.1",
+ "eslint": "^8.56.0",
+ "eslint-plugin-react": "^7.33.2",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.5",
+ "vite": "^5.1.4"
+ }
+ }))
+
+ await input.write('npm install && npm run dev\n')
+ },
+ createNewFiles: () => [
+ {
+ name: 'App.jsx',
+ contents: `import { useState } from 'react'
+
+function App() {
+ const [count, setCount] = useState(0)
+
+ return (
+ <>
+ React!
+
+
+
+ Edit App.jsx and save to test HMR
+
+
Svelte
+
+
+
+
+
+
+`
+ },
+ {
+ name: 'main.js',
+ contents: `import App from './App.svelte'
+
+const app = new App({
+ target: document.getElementById('app'),
+})
+
+export default app`
+ },
+ {
+ name: '.codebox',
+ contents: `{
+ "type": "svelte",
+ "main": "main.js"
+}`
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/views/editor/configs/typescript-cli.ts b/src/views/editor/configs/typescript-cli.ts
new file mode 100644
index 0000000..6bed344
--- /dev/null
+++ b/src/views/editor/configs/typescript-cli.ts
@@ -0,0 +1,31 @@
+import {WebContainer, WebContainerProcess} from "@webcontainer/api";
+import {htmlBody, mergePackageJSON} from "./helper.ts";
+
+export default {
+ name: 'Typescript-CLI',
+ icon: 'brand-typescript',
+ descriptions: ``,
+ async initContainer(config: any, files: any[], sh: WebContainerProcess, webContainer: WebContainer, input: WritableStreamDefaultWriter) {
+ await webContainer.fs.writeFile('package.json', JSON.stringify(await mergePackageJSON({
+ "type": undefined,
+ "devDependencies": {
+ "typescript": "^5.2.2"
+ }
+ }, webContainer)))
+
+ await input.write(`npm install && npx -y ts-node ${config.main || 'app.ts'}\n`)
+ },
+ createNewFiles: () => [
+ {
+ name: 'main.ts',
+ contents: `console.log('Hello World')`
+ },
+ {
+ name: '.codebox',
+ contents: `{
+ "type": "typescript-cli",
+ "main": "main.ts"
+}`
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/views/editor/configs/typescript-web.ts b/src/views/editor/configs/typescript-web.ts
new file mode 100644
index 0000000..72f41b3
--- /dev/null
+++ b/src/views/editor/configs/typescript-web.ts
@@ -0,0 +1,47 @@
+import {WebContainer, WebContainerProcess} from "@webcontainer/api";
+import {createTSConfig, htmlBody, mergePackageJSON} from "./helper.ts";
+
+export default {
+ name: 'Typescript-Web',
+ icon: 'brand-typescript',
+ descriptions: ``,
+ async initContainer(config: any, files: any[], sh: WebContainerProcess, webContainer: WebContainer, input: WritableStreamDefaultWriter) {
+ if (!files.find(f => f.name === 'index.html')) {
+ await webContainer.fs.writeFile(
+ 'index.html',
+ htmlBody(``)
+ )
+ }
+
+ if (!files.find(f => f.name === 'tsconfig.json')) {
+ await webContainer.fs.writeFile('tsconfig.json', createTSConfig())
+ }
+
+ await webContainer.fs.writeFile('package.json', JSON.stringify(await mergePackageJSON({
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "devDependencies": {
+ "typescript": "^5.2.2",
+ "vite": "^5.1.4"
+ }
+ }, webContainer)))
+
+ await input.write('npm install && npm run dev\n')
+ },
+ createNewFiles: () => [
+ {
+ name: 'main.ts',
+ contents: `document.body.appendChild(document.createTextNode('Hello World!'))`
+ },
+ {
+ name: '.codebox',
+ contents: `{
+ "type": "typescript-web",
+ "main": "main.ts"
+}`
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/views/editor/configs/vue.ts b/src/views/editor/configs/vue.ts
new file mode 100644
index 0000000..a742d7e
--- /dev/null
+++ b/src/views/editor/configs/vue.ts
@@ -0,0 +1,89 @@
+import {WebContainer, WebContainerProcess} from "@webcontainer/api";
+
+export default {
+ name: 'Vue',
+ icon: 'brand-vue',
+ descriptions: ``,
+ async initContainer(config: any, files: any[], sh: WebContainerProcess, webContainer: WebContainer, input: WritableStreamDefaultWriter) {
+ if (!files.find(f => f.name === 'index.html')) {
+ await webContainer.fs.writeFile('index.html', `
+
+
+
+
+
+
+ Pastefy-Codebox
+
+
+
+
+
+
+ `)
+ }
+ if (!files.find(f => f.name === 'vite.config.js')) {
+ await webContainer.fs.writeFile('vite.config.js', `
+ import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue()],
+})
+`)
+ }
+
+ await webContainer.fs.writeFile('package.json', JSON.stringify({
+ "name": "testvite1",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "devDependencies": {
+ "vite": "^5.1.4",
+ "@vitejs/plugin-vue": "^5.0.4",
+ }
+ }))
+
+ await input.write('npm install && npm run dev\n')
+ },
+ createNewFiles: () => [
+ {
+ name: 'App.vue',
+ contents: `
+
+
+
+
Example Vue!
+
+
+
+`
+ },
+ {
+ name: 'main.js',
+ contents: `import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')`
+ },
+ {
+ name: '.codebox',
+ contents: `{
+ "type": "vue",
+ "main": "main.js"
+}`
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/views/editor/langReplacements.ts b/src/views/editor/langReplacements.ts
new file mode 100644
index 0000000..9bb232f
--- /dev/null
+++ b/src/views/editor/langReplacements.ts
@@ -0,0 +1,24 @@
+export default {
+ md: 'markdown',
+ js: 'javascript',
+ jsx: 'javascript',
+ jsm: 'javascript',
+ ts: "typescript",
+ tsm: "typescript",
+ tsx: "typescript",
+ html: 'xml',
+ svg: 'xml',
+ htm: 'xml',
+ xhtml: 'xml',
+ iml: 'xml',
+ vue: 'xml',
+ yml: 'yaml',
+ py: 'python',
+ css: 'scss',
+ sass: 'yaml',
+ cs: 'csharp',
+ env: 'properties',
+ txt: "text",
+ h: "c",
+ ino: "c",
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..152599a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "allowJs": true,
+ "allowImportingTsExtensions": true,
+ "target": "ES5",
+ "lib": [ "es2017", "dom" ]
+ }
+}
\ No newline at end of file