Skip to content

Commit 4161fad

Browse files
brandyscarneybrandyscarney
authored
refactor(stackblitz): move html playgrounds to node and vite (#4062)
Co-authored-by: Brandy Smith <[email protected]>
1 parent a9e9a27 commit 4161fad

File tree

12 files changed

+156
-27
lines changed

12 files changed

+156
-27
lines changed

‎renovate.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@
2222
"matchPackageNames": ["react", "react-dom"],
2323
"groupName": "react"
2424
},
25+
{
26+
"matchPackageNames": ["vite", "vite-plugin-static-copy"],
27+
"groupName": "vite-html",
28+
"matchFileNames": [
29+
"static/code/stackblitz/**/html/package.json"
30+
]
31+
},
2532
{
2633
"matchPackageNames": ["vite", "@vitejs/plugin-react"],
2734
"groupName": "vite-react",

‎src/components/global/Playground/stackblitz.utils.ts

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -54,20 +54,32 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
5454
options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
5555
'html/variables.css',
5656
'html/package.json',
57+
'html/tsconfig.json',
58+
'html/vite.config.ts',
5759
],
5860
options.version
5961
);
6062

63+
const package_json = JSON.parse(defaultFiles[3]);
64+
65+
if (options?.dependencies) {
66+
package_json.dependencies = {
67+
...package_json.dependencies,
68+
...options.dependencies,
69+
};
70+
}
71+
6172
const indexHtml = 'index.html';
6273
const files = {
74+
'package.json': JSON.stringify(package_json, null, 2),
6375
'index.ts': defaultFiles[0],
6476
[indexHtml]: defaultFiles[1],
6577
'theme/variables.css': defaultFiles[2],
78+
'tsconfig.json': defaultFiles[4],
79+
'vite.config.ts': defaultFiles[5],
6680
...options?.files,
6781
};
6882

69-
const package_json = defaultFiles[3];
70-
7183
files[indexHtml] = defaultFiles[1].replace(/{{ TEMPLATE }}/g, code).replace(
7284
'</head>',
7385
`
@@ -82,23 +94,11 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
8294
`
8395
);
8496

85-
let dependencies = {};
86-
try {
87-
dependencies = {
88-
...dependencies,
89-
...JSON.parse(package_json).dependencies,
90-
...options?.dependencies,
91-
};
92-
} catch (e) {
93-
console.error('Failed to parse package.json contents', e);
94-
}
95-
9697
sdk.openProject({
97-
template: 'typescript',
98+
template: 'node',
9899
title: options?.title ?? DEFAULT_EDITOR_TITLE,
99100
description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
100101
files,
101-
dependencies,
102102
});
103103
};
104104

‎static/code/stackblitz/v7/html/index.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23

34
<head>
4-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
5-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
5+
<meta charset="UTF-8" />
6+
<link rel="icon" href="/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Ionic App</title>
69
</head>
710

811
<body>
912
<ion-app>
1013
{{ TEMPLATE }}
1114
</ion-app>
15+
16+
<script type="module" src="./index.ts"></script>
1217
</body>
1318

1419
</html>

‎static/code/stackblitz/v7/html/index.withContent.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23

34
<head>
4-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
5-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
5+
<meta charset="UTF-8" />
6+
<link rel="icon" href="/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Ionic App</title>
69
</head>
710

811
<body>
@@ -11,6 +14,8 @@
1114
{{ TEMPLATE }}
1215
</ion-content>
1316
</ion-app>
17+
18+
<script type="module" src="./index.ts"></script>
1419
</body>
1520

1621
</html>

‎static/code/stackblitz/v7/html/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
{
2+
"name": "html-starter",
3+
"private": true,
4+
"type": "module",
5+
"main": "index.ts",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"start": "vite preview"
10+
},
211
"dependencies": {
312
"@ionic/core": "^7.0.0",
413
"ionicons": "8.0.10"
14+
},
15+
"devDependencies": {
16+
"typescript": "^5.0.0",
17+
"vite": "^6.0.0",
18+
"vite-plugin-static-copy": "^3.1.0"
519
}
620
}

‎static/code/stackblitz/v7/html/tsconfig.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": "./",
4+
"target": "esnext",
5+
"module": "nodenext",
6+
"moduleResolution": "nodenext",
7+
"outDir": "dist",
8+
"strict": true,
9+
"esModuleInterop": true,
10+
"skipLibCheck": true,
11+
"forceConsistentCasingInFileNames": true,
12+
"lib": ["esnext", "dom"],
13+
"resolveJsonModule": true,
14+
"allowSyntheticDefaultImports": true,
15+
"isolatedModules": true,
16+
"types": ["node"]
17+
},
18+
"include": ["src/**/*.ts"]
19+
}

‎static/code/stackblitz/v7/html/vite.config.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { defineConfig } from 'vite';
2+
import { viteStaticCopy } from 'vite-plugin-static-copy';
3+
4+
export default defineConfig({
5+
optimizeDeps: {
6+
exclude: ['@ionic/core'],
7+
},
8+
plugins: [
9+
viteStaticCopy({
10+
targets: [
11+
{
12+
src: 'node_modules/ionicons/dist/svg/*',
13+
dest: 'svg'
14+
}
15+
]
16+
})
17+
]
18+
});

‎static/code/stackblitz/v8/html/index.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23

34
<head>
4-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@8/css/core.css" />
5-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@8/css/ionic.bundle.css" />
5+
<meta charset="UTF-8" />
6+
<link rel="icon" href="/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Ionic App</title>
69
</head>
710

811
<body>
912
<ion-app>
1013
{{ TEMPLATE }}
1114
</ion-app>
15+
16+
<script type="module" src="./index.ts"></script>
1217
</body>
1318

1419
</html>

‎static/code/stackblitz/v8/html/index.withContent.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
23

34
<head>
4-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@8/css/core.css" />
5-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@8/css/ionic.bundle.css" />
5+
<meta charset="UTF-8" />
6+
<link rel="icon" href="/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Ionic App</title>
69
</head>
710

811
<body>
@@ -11,6 +14,8 @@
1114
{{ TEMPLATE }}
1215
</ion-content>
1316
</ion-app>
17+
18+
<script type="module" src="./index.ts"></script>
1419
</body>
1520

1621
</html>

‎static/code/stackblitz/v8/html/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
{
2+
"name": "html-starter",
3+
"private": true,
4+
"type": "module",
5+
"main": "index.ts",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"start": "vite preview"
10+
},
211
"dependencies": {
312
"@ionic/core": "8.6.3",
413
"ionicons": "8.0.10"
14+
},
15+
"devDependencies": {
16+
"typescript": "^5.0.0",
17+
"vite": "^6.0.0",
18+
"vite-plugin-static-copy": "^3.1.0"
519
}
620
}

0 commit comments

Comments
 (0)