Skip to content

Commit 0e95350

Browse files
JulianFun123JulianFun123
committed
Added package.json merge for some types
1 parent 02a1d88 commit 0e95350

File tree

8 files changed

+78
-74
lines changed

8 files changed

+78
-74
lines changed

‎src/views/editor/configs/helper.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -43,18 +43,18 @@ export async function mergePackageJSON(merge: any, webContainer: WebContainer):
4343

4444
export function htmlBody(body = '', head = '') {
4545
return `<!doctype html>
46-
<html lang="en">
47-
<head>
48-
<meta charset="UTF-8">
49-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
50-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
51-
<title>Pastefy-Codebox</title>
52-
${head}
53-
</head>
54-
<body>
55-
${body}
56-
</body>
57-
</html>`
46+
<html lang="en">
47+
<head>
48+
<meta charset="UTF-8">
49+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
50+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
51+
<title>Pastefy-Codebox</title>
52+
${head}
53+
</head>
54+
<body>
55+
${body}
56+
</body>
57+
</html>`
5858
}
5959
export function createTSConfig(): string {
6060
return `{

‎src/views/editor/configs/html-js-css.ts‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,31 @@
1+
import {htmlBody} from "./helper.ts";
2+
13
export default {
24
name: 'HTML-CSS-JS',
35
icon: 'brand-html5',
46
descriptions: ``,
57
createNewFiles: () => [
68
{
79
name: 'index.html',
8-
contents: `<!doctype html>
9-
<html lang="en">
10-
<head>
11-
<meta charset="UTF-8">
12-
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
13-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
14-
<title>Document</title>
15-
</head>
16-
<body>
17-
<h1>Hi</h1>
10+
contents: htmlBody(`<h1>My Site!</h1>
11+
<button id="button">Count is 0</button>
1812
19-
<script src="/index.js"></script>
20-
</body>
21-
</html>`
13+
<script src="/index.js"></script>`, `<link rel="stylesheet" href="/styles.css">`)
2214
},
2315
{
2416
name: 'index.js',
25-
contents: `document.querySelector('h1').textContent = 'Hello World!'`
17+
contents: `const button = document.querySelector('#button')
18+
19+
let count = 0
20+
button.addEventListener('click', () => {
21+
button.textContent = \`Count is \${++count}\`
22+
})
23+
`
2624
},
2725
{
2826
name: 'styles.css',
2927
contents: `* {
3028
font-family: sans-serif;
31-
margin: 0;
32-
padding: 0;
3329
}`
3430
},
3531
{

‎src/views/editor/configs/javascript-web.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {WebContainer, WebContainerProcess} from "@webcontainer/api";
2+
import {mergePackageJSON} from "./helper.ts";
23

34
export default {
45
name: 'Typescript-Web',
@@ -22,7 +23,7 @@ export default {
2223
`)
2324
}
2425

25-
await webContainer.fs.writeFile('package.json', JSON.stringify({
26+
await webContainer.fs.writeFile('package.json', JSON.stringify(await mergePackageJSON({
2627
"name": "testvite1",
2728
"private": true,
2829
"version": "0.0.0",
@@ -35,7 +36,7 @@ export default {
3536
"devDependencies": {
3637
"vite": "^5.1.4"
3738
}
38-
}))
39+
}, webContainer)))
3940

4041
await input.write('npm install && npm run dev\n')
4142
},

‎src/views/editor/configs/jdom-template-app.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {WebContainer, WebContainerProcess} from "@webcontainer/api";
2+
import {mergePackageJSON} from "./helper.ts";
23

34
export default {
45
name: 'JDOM-Template',
@@ -22,7 +23,7 @@ export default {
2223
`)
2324
}
2425

25-
await webContainer.fs.writeFile('package.json', JSON.stringify({
26+
await webContainer.fs.writeFile('package.json', JSON.stringify(await mergePackageJSON({
2627
"name": "testvite1",
2728
"private": true,
2829
"version": "0.0.0",
@@ -38,7 +39,7 @@ export default {
3839
"devDependencies": {
3940
"vite": "^5.1.4"
4041
}
41-
}))
42+
}, webContainer)))
4243

4344
await input.write('npm install && npm run dev\n')
4445
},

‎src/views/editor/configs/jdom-template-ts-app.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {WebContainer, WebContainerProcess} from "@webcontainer/api";
2-
import {createTSConfig, htmlBody} from "./helper.ts";
2+
import {createTSConfig, htmlBody, mergePackageJSON} from "./helper.ts";
33

44
export default {
55
name: 'JDOM-Template TS',
@@ -14,7 +14,7 @@ export default {
1414
await webContainer.fs.writeFile('tsconfig.json', createTSConfig())
1515
}
1616

17-
await webContainer.fs.writeFile('package.json', JSON.stringify({
17+
await webContainer.fs.writeFile('package.json', JSON.stringify(await mergePackageJSON({
1818
"name": "testvite1",
1919
"private": true,
2020
"version": "0.0.0",
@@ -31,7 +31,7 @@ export default {
3131
"typescript": "^5.2.2",
3232
"vite": "^5.1.4"
3333
}
34-
}))
34+
}, webContainer)))
3535

3636
await input.write('npm install && npm run dev\n')
3737
},

‎src/views/editor/configs/react.ts‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {WebContainer, WebContainerProcess} from "@webcontainer/api";
2+
import {mergePackageJSON} from "./helper.ts";
23

34
export default {
45
name: 'React',
@@ -55,7 +56,7 @@ export default defineConfig({
5556
}`)
5657
}
5758

58-
await webContainer.fs.writeFile('package.json', JSON.stringify({
59+
await webContainer.fs.writeFile('package.json', JSON.stringify(await mergePackageJSON({
5960
"name": "testvite1",
6061
"private": true,
6162
"version": "0.0.0",
@@ -80,7 +81,7 @@ export default defineConfig({
8081
"eslint-plugin-react-refresh": "^0.4.5",
8182
"vite": "^5.1.4"
8283
}
83-
}))
84+
}, webContainer)))
8485

8586
await input.write('npm install && npm run dev\n')
8687
},
@@ -90,21 +91,21 @@ export default defineConfig({
9091
contents: `import { useState } from 'react'
9192
9293
function App() {
93-
const [count, setCount] = useState(0)
94-
95-
return (
96-
<>
97-
<h1>React!</h1>
98-
<div className="card">
99-
<button onClick={() => setCount((count) => count + 1)}>
100-
count is {count}
101-
</button>
102-
<p>
103-
Edit <code>App.jsx</code> and save to test HMR
104-
</p>
105-
</div>
106-
</>
107-
)
94+
const [count, setCount] = useState(0)
95+
96+
return (
97+
<>
98+
<h1>React!</h1>
99+
<div className="card">
100+
<button onClick={() => setCount((count) => count + 1)}>
101+
count is {count}
102+
</button>
103+
<p>
104+
Edit <code>App.jsx</code> and save to test HMR
105+
</p>
106+
</div>
107+
</>
108+
)
108109
}
109110
110111
export default App`
@@ -117,9 +118,9 @@ import App from './App.jsx'
117118
import './styles.css'
118119
119120
ReactDOM.createRoot(document.getElementById('root')).render(
120-
<React.StrictMode>
121-
<App />
122-
</React.StrictMode>,
121+
<React.StrictMode>
122+
<App />
123+
</React.StrictMode>,
123124
)`
124125
},
125126
{

‎src/views/editor/configs/svelte.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {WebContainer, WebContainerProcess} from "@webcontainer/api";
2-
import {htmlBody} from "./helper.ts";
2+
import {htmlBody, mergePackageJSON} from "./helper.ts";
33

44
export default {
55
name: 'Svelte',
@@ -29,7 +29,7 @@ export default {
2929
}`)
3030
}
3131

32-
await webContainer.fs.writeFile('package.json', JSON.stringify({
32+
await webContainer.fs.writeFile('package.json', JSON.stringify(await mergePackageJSON({
3333
"name": "testvite1",
3434
"private": true,
3535
"version": "0.0.0",
@@ -44,7 +44,7 @@ export default {
4444
"svelte": "^4.2.11",
4545
"vite": "^5.1.4"
4646
}
47-
}))
47+
}, webContainer)))
4848

4949
await input.write('npm install && npm run dev\n')
5050
},
@@ -59,13 +59,13 @@ const increment = () => {
5959
</script>
6060
6161
<main>
62-
<h1>Svelte</h1>
63-
64-
<div class="card">
65-
<button on:click={increment}>
66-
count is {count}
67-
</button>
68-
</div>
62+
<h1>Svelte</h1>
63+
64+
<div class="card">
65+
<button on:click={increment}>
66+
count is {count}
67+
</button>
68+
</div>
6969
</main>
7070
7171
<style>
@@ -79,7 +79,7 @@ const increment = () => {
7979
contents: `import App from './App.svelte'
8080
8181
const app = new App({
82-
target: document.getElementById('app'),
82+
target: document.getElementById('app'),
8383
})
8484
8585
export default app`

‎src/views/editor/configs/vue.ts‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,16 +55,21 @@ export default defineConfig({
5555
createNewFiles: () => [
5656
{
5757
name: 'App.vue',
58-
contents: `<script setup>
59-
console.log('Hello World')
60-
</script>
61-
62-
<template>
63-
<div>
64-
<h1>Example Vue!</h1>
65-
</div>
58+
contents: `<template>
59+
<div>
60+
<h1>Example Vue!</h1>
61+
<button @click="count++">Count is {{count}}</button>
62+
</div>
6663
</template>
6764
65+
<script>
66+
export default {
67+
data: () => ({
68+
count: 0
69+
})
70+
}
71+
</script>
72+
6873
<style scoped>
6974
h1 {
7075
color: #439999

0 commit comments

Comments
 (0)