chore: Migrate example project to Vite (#21)

aws · Sep 17, 2021 · 915bb5a · 915bb5a
1 parent f6355a5
commit 915bb5a
Show file tree

Hide file tree

Showing 11 changed files with 687 additions and 17,626 deletions.
diff --git a/example/README.md b/example/README.md
@@ -3,7 +3,7 @@
 This project demonstrates how to use [AWS UI React Components](https://www.npmjs.com/package/@awsui/components-react).
 It is part of the [AWS UI Getting Started Guide](https://github.com/aws/awsui-documentation#getting-started).
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This project was bootstrapped with [Vite](https://vitejs.dev/).
 
 ## License Summary
 

diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AWS-UI Demo App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.tsx"></script>
+  </body>
+</html>
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -10,33 +10,13 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.3",
-    "@testing-library/user-event": "^12.6.2",
-    "react-scripts": "4.0.3"
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "typescript": "^4.3.2",
+    "vite": "^2.5.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@awsui)/).+\\.(js|jsx|ts|tsx)$'",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "start": "vite",
+    "build": "tsc && vite build"
   }
 }
diff --git a/example/public/index.html b/example/public/index.html
diff --git a/example/public/robots.txt b/example/public/robots.txt
diff --git a/example/src/App.js → example/src/App.tsx b/example/src/App.js → example/src/App.tsx
@@ -2,17 +2,17 @@
 import Form from "@awsui/components-react/form";
 import FormField from "@awsui/components-react/form-field";
 import Input from "@awsui/components-react/input";
-import Select from "@awsui/components-react/select";
+import Select, { SelectProps } from "@awsui/components-react/select";
 import Container from "@awsui/components-react/container";
 import Header from "@awsui/components-react/header";
 import SpaceBetween from "@awsui/components-react/space-between";
 import Button from "@awsui/components-react/button";
 import AppLayout from "@awsui/components-react/app-layout";
-import { useState } from "react";
+import React, { useState } from "react";
 
 function App() {
-  const [inputValue, setInputValue] = useState();
-  const [selectValue, setSelectValue] = useState();
+  const [inputValue, setInputValue] = useState("");
+  const [selectValue, setSelectValue] = useState<SelectProps.Option | null>(null);
   return (
     <AppLayout
       content={

diff --git a/example/src/index.js → example/src/main.tsx b/example/src/index.js → example/src/main.tsx
diff --git a/example/src/vite-env.d.ts b/example/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["./src"]
+}
diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: "",
+  build: {
+    outDir: "build"
+  }
+});