Skip to content

Commit bb4eaf6

Browse files
liamdebeasiliamdebeasi
authored
docs(react): v7 playgrounds use vite (#3236)
1 parent 1f674a2 commit bb4eaf6

File tree

8 files changed

+1919
-28002
lines changed

8 files changed

+1919
-28002
lines changed

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,9 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
179179
'react/package.json',
180180
'react/package-lock.json',
181181
'react/index.html',
182+
'react/vite.config.js',
183+
'react/browserslistrc',
184+
'react/eslintrc.js',
182185
],
183186
options.version
184187
);
@@ -194,7 +197,10 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
194197

195198
const appTsx = 'src/App.tsx';
196199
const files = {
197-
'public/index.html': defaultFiles[6],
200+
'.eslintrc.js': defaultFiles[9],
201+
'.browserslistrc': defaultFiles[8],
202+
'vite.config.js': defaultFiles[7],
203+
'index.html': defaultFiles[6],
198204
'src/index.tsx': defaultFiles[0],
199205
[appTsx]: defaultFiles[1],
200206
'src/main.tsx': code,

‎static/code/stackblitz/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,10 @@ This directory contains the source files for generating the individual framework
3535
| `main.js` | Initializes Ionic Vue and imports global styles. |
3636
| `package.json` | Project specific dependencies to create an example with Vite. |
3737
| `vite.config.js` | Vite configuration file. |
38+
39+
40+
## Dotfiles
41+
42+
Dotfiles must be saved without the dot otherwise they will not be fetched correctly. However, when creating the StackBlitz project the dot can be used.
43+
44+
For example, if you had an `.eslintrc.js` file you would save it as `eslintrc.js` in this repo. When creating the StackBlitz project the contents of that file can then be saved as `.eslintrc.js`

‎static/code/stackblitz/v7/react/browserslistrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
Chrome >=79
2+
ChromeAndroid >=79
3+
Firefox >=70
4+
Edge >=79
5+
Safari >=14
6+
iOS >=14

‎static/code/stackblitz/v7/react/eslintrc.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
'extends': [
7+
'plugin:react/recommended',
8+
'eslint:recommended'
9+
],
10+
parserOptions: {
11+
ecmaVersion: 2020
12+
},
13+
rules: {
14+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15+
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16+
}
17+
}

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5-
</head>
4+
<meta charset="utf-8" />
5+
<title>Ionic App</title>
6+
7+
<base href="/" />
68

7-
<div id="root"></div>
9+
<meta name="color-scheme" content="light dark" />
10+
<meta
11+
name="viewport"
12+
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
13+
/>
14+
<meta name="format-detection" content="telephone=no" />
15+
<meta name="msapplication-tap-highlight" content="no" />
16+
17+
<!-- add to homescreen for ios -->
18+
<meta name="apple-mobile-web-app-capable" content="yes" />
19+
<meta name="apple-mobile-web-app-title" content="Ionic App" />
20+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
21+
</head>
22+
<body>
23+
<div id="root"></div>
24+
<script type="module" src="/src/index.tsx"></script>
25+
</body>
826
</html>

0 commit comments

Comments
 (0)