refactor(stackblitz): move html playgrounds to node and vite

brandyscarney · brandyscarney · commit 753b6c52986e · 2025-06-04T13:41:31.000-04:00
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
@@ -54,20 +54,25 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
       options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
       'html/variables.css',
       'html/package.json',
+      'html/tsconfig.json',
+      'html/vite.config.ts',
     ],
     options.version
   );
 
+  const package_json = JSON.parse(defaultFiles[3]);
+
   const indexHtml = 'index.html';
   const files = {
-    'index.ts': defaultFiles[0],
+    'package.json': JSON.stringify(package_json, null, 2),
+    'src/index.ts': defaultFiles[0],
     [indexHtml]: defaultFiles[1],
-    'theme/variables.css': defaultFiles[2],
+    'src/theme/variables.css': defaultFiles[2],
+    'tsconfig.json': defaultFiles[4],
+    'vite.config.ts': defaultFiles[5],
     ...options?.files,
   };
 
-  const package_json = defaultFiles[3];
-
   files[indexHtml] = defaultFiles[1].replace(/{{ TEMPLATE }}/g, code).replace(
     '</head>',
     `
@@ -82,23 +87,18 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
 `
   );
 
-  let dependencies = {};
-  try {
-    dependencies = {
-      ...dependencies,
-      ...JSON.parse(package_json).dependencies,
-      ...options?.dependencies,
+  if (options?.dependencies) {
+    package_json.dependencies = {
+      ...package_json.dependencies,
+      ...options.dependencies,
     };
-  } catch (e) {
-    console.error('Failed to parse package.json contents', e);
   }
 
   sdk.openProject({
-    template: 'typescript',
+    template: 'node',
     title: options?.title ?? DEFAULT_EDITOR_TITLE,
     description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
     files,
-    dependencies,
   });
 };
 
diff --git a/static/code/stackblitz/v8/html/index.html b/static/code/stackblitz/v8/html/index.html
@@ -1,14 +1,11 @@
 <html>
 
-<head>
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@8/css/core.css" />
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@8/css/ionic.bundle.css" />
-</head>
-
 <body>
   <ion-app>
     {{ TEMPLATE }}
   </ion-app>
+
+  <script type="module" src="./src/index.ts"></script>
 </body>
 
 </html>
diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html
@@ -1,16 +1,13 @@
 <html>
 
-<head>
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@8/css/core.css" />
-  <link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@8/css/ionic.bundle.css" />
-</head>
-
 <body>
   <ion-app>
     <ion-content class="ion-padding">
       {{ TEMPLATE }}
     </ion-content>
   </ion-app>
+
+  <script type="module" src="./src/index.ts"></script>
 </body>
 
 </html>
diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
@@ -1,6 +1,17 @@
 {
+  "name": "html-starter",
+  "private": true,
+  "type": "module",
+  "main": "index.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "start": "vite preview"
+  },
   "dependencies": {
     "@ionic/core": "8.6.0",
-    "ionicons": "8.0.8"
+    "ionicons": "8.0.8",
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0"
   }
 }
diff --git a/static/code/stackblitz/v8/html/tsconfig.json b/static/code/stackblitz/v8/html/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "esnext",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["esnext", "dom"],
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/static/code/stackblitz/v8/html/vite.config.ts b/static/code/stackblitz/v8/html/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['@ionic/core'],
+  },
+});

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,17 @@`
`1`	`1`	`{`
	`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`	`+ },`
`2`	`11`	`"dependencies": {`
`3`	`12`	`"@ionic/core": "8.6.0",`
`4`		`- "ionicons": "8.0.8"`
	`13`	`+ "ionicons": "8.0.8",`
	`14`	`+ "typescript": "^5.0.0",`
	`15`	`+ "vite": "^4.0.0"`
`5`	`16`	`}`
`6`	`17`	`}`