Skip to content

Commit

Permalink
fix(playground): allow automatic mode selection when relevant base fi…
Browse files Browse the repository at this point in the history 
…le is overwritten (#2922)
  • Loading branch information
@averyjohnston
averyjohnston authored Apr 25, 2023
1 parent cae727f commit 2c43649
Show file tree
Hide file tree
Showing 13 changed files with 103 additions and 122 deletions.
161 changes: 95 additions & 66 deletions src/components/global/Playground/stackblitz.utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,34 @@ const loadSourceFiles = async (files: string[], version: number) => {
}

const openHtmlEditor = async (code: string, options?: EditorOptions) => {
const [index_ts, index_html, variables_css, package_json] = await loadSourceFiles([
const defaultFiles = await loadSourceFiles([
'html/index.ts',
options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html',
'html/variables.css',
'html/package.json'
], options.version);

const indexHtml = 'index.html';
const files = {
'index.ts': defaultFiles[0],
[indexHtml]: defaultFiles[1],
'theme/variables.css': defaultFiles[2],
...options?.files
};

const package_json = defaultFiles[3];

files[indexHtml] = files[indexHtml].replace(/{{ TEMPLATE }}/g, code).replace('</head>', `
<script>
window.Ionic = {
config: {
mode: '${options?.mode}'
}
}
</script>
</head>
`);

let dependencies = {};
try {
dependencies = {
Expand All @@ -68,18 +89,13 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
template: 'typescript',
title: options?.title ?? DEFAULT_EDITOR_TITLE,
description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
files: {
'index.html': index_html.replace(/{{ TEMPLATE }}/g, code).replace(/{{ MODE }}/g, options?.mode),
'index.ts': index_ts,
'theme/variables.css': variables_css,
...options?.files
},
files,
dependencies
})
}

const openAngularEditor = async (code: string, options?: EditorOptions) => {
let [main_ts, app_module_ts, app_component_ts, app_component_css, app_component_html, example_component_ts, styles_css, global_css, variables_css, angular_json, tsconfig_json, package_json] = await loadSourceFiles([
const defaultFiles = await loadSourceFiles([
'angular/main.ts',
'angular/app.module.ts',
'angular/app.component.ts',
Expand All @@ -92,18 +108,40 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
'angular/angular.json',
'angular/tsconfig.json',
'angular/package.json'
], options.version)
], options.version);

const appModule = 'src/app/app.module.ts';
const files = {
'src/main.ts': defaultFiles[0],
'src/polyfills.ts': `import 'zone.js/dist/zone';`,
[appModule]: defaultFiles[1],
'src/app/app.component.ts': defaultFiles[2],
'src/app/app.component.css': defaultFiles[3],
'src/app/app.component.html': defaultFiles[4],
'src/app/example.component.ts': defaultFiles[5],
'src/app/example.component.html': code,
'src/app/example.component.css': '',
'src/index.html': '<app-root></app-root>',
'src/styles.css': defaultFiles[6],
'src/global.css': defaultFiles[7],
'src/theme/variables.css': defaultFiles[8],
'angular.json': defaultFiles[9],
'tsconfig.json': defaultFiles[10],
...options?.files
};

const package_json = defaultFiles[11];

if (options.angularModuleOptions) {
if (options.angularModuleOptions.imports) {
app_module_ts = `${options.angularModuleOptions.imports.join('\n')}\n${app_module_ts}`;
files[appModule] = `${options.angularModuleOptions.imports.join('\n')}\n${files[appModule]}`;
}
if (options.angularModuleOptions.declarations) {
app_module_ts = app_module_ts.replace('/* CUSTOM_DECLARATIONS */', options.angularModuleOptions.declarations.map(d => `\n ${d}`).join(','));
files[appModule] = files[appModule].replace('/* CUSTOM_DECLARATIONS */', options.angularModuleOptions.declarations.map(d => `\n ${d}`).join(','));
}
}

app_module_ts = app_module_ts.replace('{{ MODE }}', options?.mode);
files[appModule] = files[appModule].replace('IonicModule.forRoot({})', `IonicModule.forRoot({ mode: '${options?.mode}' })`);

let dependencies = {};
try {
Expand All @@ -119,30 +157,13 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
template: 'angular-cli',
title: options?.title ?? DEFAULT_EDITOR_TITLE,
description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
files: {
'src/main.ts': main_ts,
'src/polyfills.ts': `import 'zone.js/dist/zone';`,
'src/app/app.module.ts': app_module_ts,
'src/app/app.component.ts': app_component_ts,
'src/app/app.component.html': app_component_html,
'src/app/example.component.ts': example_component_ts,
'src/app/example.component.html': code,
'src/app/example.component.css': '',
'src/app/app.component.css': app_component_css,
'src/index.html': '<app-root></app-root>',
'src/styles.css': styles_css,
'src/global.css': global_css,
'src/theme/variables.css': variables_css,
'angular.json': angular_json,
'tsconfig.json': tsconfig_json,
...options?.files
},
files,
dependencies
});
}

const openReactEditor = async (code: string, options?: EditorOptions) => {
let [index_tsx, app_tsx, variables_css, ts_config_json, package_json, package_lock_json, index_html] = await loadSourceFiles([
const defaultFiles = await loadSourceFiles([
'react/index.tsx',
options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx',
'react/variables.css',
Expand All @@ -152,31 +173,34 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
'react/index.html',
], options.version);

app_tsx = app_tsx.replace('{{ MODE }}', options?.mode);
const appTsx = 'src/App.tsx';
const files = {
'public/index.html': defaultFiles[6],
'src/index.tsx': defaultFiles[0],
[appTsx]: defaultFiles[1],
'src/main.tsx': code,
'src/theme/variables.css': defaultFiles[2],
'tsconfig.json': defaultFiles[3],
'package.json': defaultFiles[4],
'package-lock.json': defaultFiles[5],
...options?.files,
'.stackblitzrc': `{
"startCommand": "yarn run start"
}`
};

files[appTsx] = files[appTsx].replace('setupIonicReact()', `setupIonicReact({ mode: '${options?.mode}' })`);

sdk.openProject({
template: 'node',
title: options?.title ?? DEFAULT_EDITOR_TITLE,
description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
files: {
'public/index.html': index_html,
'src/index.tsx': index_tsx,
'src/App.tsx': app_tsx,
'src/main.tsx': code,
'src/theme/variables.css': variables_css,
'tsconfig.json': ts_config_json,
'package.json': package_json,
'package-lock.json': package_lock_json,
...options?.files,
'.stackblitzrc': `{
"startCommand": "yarn run start"
}`
}
})
files
});
}

const openVueEditor = async (code: string, options?: EditorOptions) => {
let [package_json, package_lock_json, index_html, variables_css, vite_config_ts, main_ts, app_vue, tsconfig_json, tsconfig_node_json, env_d_ts] = await loadSourceFiles([
const defaultFiles = await loadSourceFiles([
'vue/package.json',
'vue/package-lock.json',
'vue/index.html',
Expand All @@ -189,7 +213,28 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
'vue/env.d.ts'
], options.version);

main_ts = main_ts.replace('{{ MODE }}', options?.mode);
const mainTs = 'src/main.ts';
const files = {
'src/App.vue': defaultFiles[6],
'src/components/Example.vue': code,
[mainTs]: defaultFiles[5],
'src/env.d.ts': defaultFiles[9],
'src/theme/variables.css': defaultFiles[3],
'index.html': defaultFiles[2],
'vite.config.ts': defaultFiles[4],
'package.json': defaultFiles[0],
'package-lock.json': defaultFiles[1],
'tsconfig.json': defaultFiles[7],
'tsconfig.node.json': defaultFiles[8],
...options?.files,
'.stackblitzrc': `{
"startCommand": "yarn run dev"
}`
};

files[mainTs] = files[mainTs].replace('.use(IonicVue)', `.use(IonicVue, {
mode: '${options?.mode}'
})`);

/**
* We have to use Stackblitz web containers here (node template), due
Expand All @@ -201,23 +246,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
template: 'node',
title: options?.title ?? DEFAULT_EDITOR_TITLE,
description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION,
files: {
'src/App.vue': app_vue,
'src/components/Example.vue': code,
'src/main.ts': main_ts,
'src/env.d.ts': env_d_ts,
'src/theme/variables.css': variables_css,
'index.html': index_html,
'vite.config.ts': vite_config_ts,
'package.json': package_json,
'package-lock.json': package_lock_json,
'tsconfig.json': tsconfig_json,
'tsconfig.node.json': tsconfig_node_json,
...options?.files,
'.stackblitzrc': `{
"startCommand": "yarn run dev"
}`
}
files
});
}

Expand Down
4 changes: 1 addition & 3 deletions static/code/stackblitz/v6/angular/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ import { AppComponent } from './app.component';
import { ExampleComponent } from './example.component';

@NgModule({
imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({
mode: '{{ MODE }}'
})],
imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
declarations: [AppComponent, ExampleComponent],
bootstrap: [AppComponent],
})
Expand Down
8 changes: 0 additions & 8 deletions static/code/stackblitz/v6/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,6 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/ionic.bundle.css" />

<script>
window.Ionic = {
config: {
mode: '{{ MODE }}'
}
}
</script>
</head>

<body>
Expand Down
8 changes: 0 additions & 8 deletions static/code/stackblitz/v6/html/index.withContent.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,6 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core/css/ionic.bundle.css" />

<script>
window.Ionic = {
config: {
mode: '{{ MODE }}'
}
}
</script>
</head>

<body>
Expand Down
4 changes: 1 addition & 3 deletions static/code/stackblitz/v6/react/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ import './theme/variables.css';

import Example from './main';

setupIonicReact({
mode: '{{ MODE }}',
});
setupIonicReact();

export default function App() {
return (
Expand Down
4 changes: 1 addition & 3 deletions static/code/stackblitz/v6/react/app.withContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ import './theme/variables.css';

import Example from './main';

setupIonicReact({
mode: '{{ MODE }}',
});
setupIonicReact();

export default function App() {
return (
Expand Down
4 changes: 1 addition & 3 deletions static/code/stackblitz/v6/vue/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,4 @@ import '@ionic/vue/css/display.css';
/* Theme variables */
import './theme/variables.css';

createApp(App).use(IonicVue, {
mode: '{{ MODE }}'
}).mount('#app');
createApp(App).use(IonicVue).mount('#app');
4 changes: 1 addition & 3 deletions static/code/stackblitz/v7/angular/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ import { AppComponent } from './app.component';
import { ExampleComponent } from './example.component';

@NgModule({
imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({
mode: '{{ MODE }}'
})],
imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
declarations: [AppComponent, ExampleComponent],
bootstrap: [AppComponent],
})
Expand Down
8 changes: 0 additions & 8 deletions static/code/stackblitz/v7/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,6 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />

<script>
window.Ionic = {
config: {
mode: '{{ MODE }}'
}
}
</script>
</head>

<body>
Expand Down
8 changes: 0 additions & 8 deletions static/code/stackblitz/v7/html/index.withContent.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,6 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />

<script>
window.Ionic = {
config: {
mode: '{{ MODE }}'
}
}
</script>
</head>

<body>
Expand Down
4 changes: 1 addition & 3 deletions static/code/stackblitz/v7/react/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ import './theme/variables.css';

import Example from './main';

setupIonicReact({
mode: '{{ MODE }}',
});
setupIonicReact();

export default function App() {
return (
Expand Down
4 changes: 1 addition & 3 deletions static/code/stackblitz/v7/react/app.withContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ import './theme/variables.css';

import Example from './main';

setupIonicReact({
mode: '{{ MODE }}',
});
setupIonicReact();

export default function App() {
return (
Expand Down
4 changes: 1 addition & 3 deletions static/code/stackblitz/v7/vue/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,4 @@ import '@ionic/vue/css/display.css';
/* Theme variables */
import './theme/variables.css';

createApp(App).use(IonicVue, {
mode: '{{ MODE }}'
}).mount('#app');
createApp(App).use(IonicVue).mount('#app');

1 comment on commit 2c43649

@vercel
Copy link

@vercel vercel bot commented on 2c43649 Apr 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ionic-docs – ./

ionic-docs-ionic1.vercel.app
ionic-docs-git-main-ionic1.vercel.app
ionic-docs-gqykycf8t.vercel.app

Please sign in to comment.