From 72916db76c55eff062a44d466eaf1ee9a0db2879 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Mon, 31 Mar 2025 15:34:14 -0400
Subject: [PATCH] refactor(stackblitz): move html playgrounds to node and vite
---
.../global/Playground/stackblitz.utils.ts | 28 +++++++++----------
static/code/stackblitz/v8/html/index.html | 7 ++---
.../stackblitz/v8/html/index.withContent.html | 7 ++---
static/code/stackblitz/v8/html/package.json | 13 ++++++++-
static/code/stackblitz/v8/html/tsconfig.json | 19 +++++++++++++
static/code/stackblitz/v8/html/vite.config.ts | 7 +++++
6 files changed, 56 insertions(+), 25 deletions(-)
create mode 100644 static/code/stackblitz/v8/html/tsconfig.json
create mode 100644 static/code/stackblitz/v8/html/vite.config.ts
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts
index aed074d6328..f0e1f698d22 100644
--- 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(
'',
`
@@ -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
index 34f05146a9a..a33492a8bad 100644
--- a/static/code/stackblitz/v8/html/index.html
+++ b/static/code/stackblitz/v8/html/index.html
@@ -1,14 +1,11 @@
-
-
-
-
-
{{ TEMPLATE }}
+
+
diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html
index e83c15e8ec9..1136c246639 100644
--- a/static/code/stackblitz/v8/html/index.withContent.html
+++ b/static/code/stackblitz/v8/html/index.withContent.html
@@ -1,16 +1,13 @@
-
-
-
-
-
{{ TEMPLATE }}
+
+
diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json
index 7bb7fcccec1..2fff7117d9f 100644
--- 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.5.1",
- "ionicons": "7.4.0"
+ "ionicons": "7.4.0",
+ "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
new file mode 100644
index 00000000000..0b999e71b8e
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..8995d50a756
--- /dev/null
+++ b/static/code/stackblitz/v8/html/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+ optimizeDeps: {
+ exclude: ['@ionic/core'],
+ },
+});