nvh95 · nvh95 · Oct 22, 2022 · Oct 22, 2022 · Oct 22, 2022 · Oct 22, 2022
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+.env
+.env.*
+node_modules
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "tabWidth": 2
+}
diff --git a/apps/react-testing-lib/index.html b/apps/react-testing-lib/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/react-testing-lib/package.json b/apps/react-testing-lib/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "example-testing-lib-react",
+  "private": true,
+  "scripts": {
+    "build": "tsc && vite build",
+    "coverage": "vitest run --coverage",
+    "dev": "vite",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "vitest-preview": "vitest-preview"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/react": "^17.0.45",
+    "@types/react-dom": "^17.0.17",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@vitejs/plugin-react": "^1.3.2",
+    "@vitest/ui": "latest",
+    "jsdom": "latest",
+    "vite": "latest",
+    "vitest": "latest",
+    "vitest-preview": "workspace:*"
+  },
+  "stackblitz": {
+    "startCommand": "npm run test:ui"
+  }
+}
diff --git a/apps/react-testing-lib/public/vitest.png b/apps/react-testing-lib/public/vitest.png
diff --git a/apps/react-testing-lib/src/App.css b/apps/react-testing-lib/src/App.css
@@ -0,0 +1,14 @@
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
diff --git a/apps/react-testing-lib/src/App.test.tsx b/apps/react-testing-lib/src/App.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import App from './App';
+import { render, screen, userEvent } from './utils/test-utils';
+import { debug } from 'vitest-preview';
+
+describe('Simple working test', () => {
+  it('should increment count on click', async () => {
+    render(<App />);
+    userEvent.click(screen.getByRole('button'));
+    userEvent.click(screen.getByRole('button'));
+    userEvent.click(screen.getByRole('button'));
+    debug();
+    expect(await screen.findByText(/count is: 3/i)).toBeInTheDocument();
+  });
+});
diff --git a/apps/react-testing-lib/src/App.tsx b/apps/react-testing-lib/src/App.tsx
@@ -0,0 +1,50 @@
+import { useCounter } from './hooks/useCounter';
+import viteLogo from './media/vite.png';
+import './App.css';
+
+function App() {
+  const { count, increment } = useCounter();
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <p>
+          Hello <b>Vitest Preview</b>!
+        </p>
+        <div>
+          <img src={viteLogo} alt="Vite Logo" width={100} />
+          <img src="/vitest.png" alt="Vitest Logo" width={100} />
+        </div>
+        <p>
+          <button type="button" onClick={increment}>
+            count is: {count}
+          </button>
+        </p>
+        <p>
+          Edit <code>App.test.tsx</code> and save to test HMR updates.
+        </p>
+        <p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+          {' | '}
+          <a
+            className="App-link"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
+      </header>
+    </div>
+  );
+}
+
+export default App;
diff --git a/apps/react-testing-lib/src/hooks/useCounter.ts b/apps/react-testing-lib/src/hooks/useCounter.ts
@@ -0,0 +1,7 @@
+import { useCallback, useState } from 'react';
+
+export const useCounter = () => {
+  const [count, setCount] = useState(0);
+  const increment = useCallback(() => setCount((x) => x + 1), []);
+  return { count, increment };
+};
diff --git a/apps/react-testing-lib/src/index.css b/apps/react-testing-lib/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/apps/react-testing-lib/src/main.tsx b/apps/react-testing-lib/src/main.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+);
diff --git a/apps/react-testing-lib/src/media/vite.png b/apps/react-testing-lib/src/media/vite.png
diff --git a/apps/react-testing-lib/src/test/setup.ts b/apps/react-testing-lib/src/test/setup.ts
@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+
+// Import global css to use with vitest-preview
+import '../index.css';
diff --git a/apps/react-testing-lib/src/utils/test-utils.tsx b/apps/react-testing-lib/src/utils/test-utils.tsx
@@ -0,0 +1,19 @@
+/* eslint-disable import/export */
+import { cleanup, render } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});
+
+const customRender = (ui: React.ReactElement, options = {}) =>
+  render(ui, {
+    // wrap provider(s) here if needed
+    wrapper: ({ children }) => children,
+    ...options,
+  });
+
+export * from '@testing-library/react';
+export { default as userEvent } from '@testing-library/user-event';
+// override render export
+export { customRender as render };
diff --git a/apps/react-testing-lib/tsconfig.json b/apps/react-testing-lib/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-jsx"
+  },
+  "include": ["./src"]
+}
diff --git a/apps/react-testing-lib/vite.config.ts b/apps/react-testing-lib/vite.config.ts
@@ -0,0 +1,17 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    // Need to enable this to use with vitest-preview
+    css: true,
+  },
+});
diff --git a/package.json b/package.json
@@ -4,14 +4,18 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prettier": "prettier apps packages --check",
+    "prettier:fix": "pnpm run prettier --write"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "devDependencies": {
     "@types/node": "^18.11.3",
     "esbuild": "^0.15.12",
+    "prettier": "^2.7.1",
+    "rimraf": "^3.0.2",
     "typescript": "^4.8.4"
   }
 }
diff --git a/packages/dev-utils/package.json b/packages/dev-utils/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@vitest-preview/dev-utils",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "copy": "mkdir dist && cp src/openChrome.applescript dist/openChrome.applescript",
+    "build": "rimraf dist && pnpm run copy && rollup -c",
+    "build:watch": "rimraf dist && pnpm run copy && rollup -c -w"
+  },
+  "keywords": [],
+  "author": {
+    "name": "Hung Viet Nguyen",
+    "url": "https://github.com/nvh95"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "rollup": "^3.2.3",
+    "rollup-plugin-dts": "^5.0.0",
+    "rollup-plugin-esbuild": "^4.10.1"
+  },
+  "dependencies": {
+    "open": "^8.4.0"
+  }
+}
diff --git a/packages/dev-utils/rollup.config.js b/packages/dev-utils/rollup.config.js
@@ -0,0 +1,55 @@
+import { builtinModules } from 'module';
+import { defineConfig } from 'rollup';
+import esbuild from 'rollup-plugin-esbuild';
+import commonjs from '@rollup/plugin-commonjs';
+import dts from 'rollup-plugin-dts';
+import nodeResolve from '@rollup/plugin-node-resolve';
+import json from '@rollup/plugin-json';
+
+import pkg from './package.json' assert { type: 'json' };
+
+const entries = ['src/index.ts'];
+
+const dtsEntries = ['src/index.ts'];
+
+const external = [
+  ...builtinModules,
+  ...Object.keys(pkg.dependencies),
+  ...Object.keys(pkg.devDependencies),
+  // TODO: Do we need any peer deps here?
+  // ...Object.keys(pkg.peerDependencies),
+];
+
+const plugins = [
+  nodeResolve({
+    preferBuiltins: true,
+  }),
+  json(),
+  commonjs(),
+  esbuild({
+    target: 'node14',
+  }),
+];
+
+export default ({ watch }) =>
+  defineConfig([
+    {
+      input: entries,
+      output: {
+        dir: 'dist',
+        format: 'esm',
+      },
+      external,
+      plugins: [...plugins],
+    },
+    {
+      input: dtsEntries,
+      output: {
+        dir: 'dist',
+        entryFileNames: (chunk) => `${chunk.name.replace('src/', '')}.d.ts`,
+        format: 'esm',
+      },
+      external,
+      plugins: [dts({ respectExternal: true })],
+    },
+  ]);
diff --git a/packages/dev-utils/src/index.ts b/packages/dev-utils/src/index.ts
@@ -0,0 +1,7 @@
+import openBrowser from './openBrowser';
+
+export { openBrowser };
+
+export default {
+  openBrowser,
+};