ts-uvu starter template

2022-03-07 10:11:30 +01:00
parent bec3c487cc
commit 254d459f16
9 changed files with 1691 additions and 0 deletions
@@ -85,6 +85,13 @@ $ cd my-solid-project
 $ npm install # or pnpm install or yarn install
 ```
 ```bash
 # Typescript + uvu template
 $ npx degit solidjs/templates/ts-uvu my-solid-project
 $ cd my-solid-project
 $ npm install # or pnpm install or yarn install
 ```
 ## I don't see a template that matches my need?
 You wish there was a template with your favorite library?
@@ -0,0 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
    <title>Solid App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/src/index.tsx" type="module"></script>
  </body>
 </html>
@@ -0,0 +1,28 @@
 {
  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "uvu -r solid-register"
  },
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "babel-preset-solid": "^1.3.6",
    "jsdom": "^19.0.0",
    "solid-dom-testing": "^0.0.3",
    "solid-register": "^0.1.5",
    "solid-testing-library": "^0.3.0",
    "typescript": "^4.6.2",
    "uvu": "^0.5.3",
    "vite": "^2.8.6",
    "vite-plugin-solid": "^2.2.5"
  },
  "dependencies": {
    "solid-js": "^1.3.9"
  }
 }
@@ -0,0 +1,5 @@
 import { render } from 'solid-js/web';
 import { TodoList } from './todo-list';
 render(() => <TodoList />, document.getElementById('root'));
@@ -0,0 +1,47 @@
 import { suite } from 'uvu';
 import * as assert from 'uvu/assert';
 import { render, fireEvent, waitFor } from 'solid-testing-library';
 import { isInDocument, hasStyle } from 'solid-dom-testing'
 import { TodoList } from './todo-list';
 const test = suite<ReturnType<typeof render>>('<TodoList />');
 test.before.each((context) => {
  const returnValue = render(() => <TodoList />);
  Object.getOwnPropertyNames(returnValue).forEach(name => {
    context[name] = returnValue[name];
  });
 });
 test.after.each(({ unmount }) => unmount());
 test('it will render an text input and a button', ({ getByPlaceholderText, getByText }) => {
  assert.ok(isInDocument(getByPlaceholderText('new todo here')));
  assert.ok(isInDocument(getByText('Add Todo')));
 });
 test('it will add a new todo', async ({ getByPlaceholderText, getByText }) => {
  const input = getByPlaceholderText('new todo here') as HTMLInputElement;
  const button = getByText('Add Todo');
  input.value = 'test new todo';
  fireEvent.click(button as HTMLInputElement);
  assert.is(input.value, '');
  await waitFor(() => assert.ok(isInDocument(getByText(/test new todo/))));
 });
 test('it will mark a todo as completed', async ({ getByPlaceholderText, findByRole, getByText }) => {
  const input = getByPlaceholderText('new todo here') as HTMLInputElement;
  const button = getByText('Add Todo') as HTMLButtonElement;
  input.value = 'mark new todo as completed';
  fireEvent.click(button);
  const completed = await findByRole('checkbox') as HTMLInputElement;
  assert.is(completed?.checked, false);
  fireEvent.click(completed);
  assert.is(completed?.checked, true);
  const text = getByText('mark new todo as completed') as HTMLSpanElement;
  assert.ok(hasStyle(text, { 'text-decoration': 'line-through' }));
 });
 test.run();
@@ -0,0 +1,49 @@
 import { For, createSignal } from 'solid-js';
 type Todo = { id: number, text: string, completed: boolean };
 export const TodoList = () => {
  let input!: HTMLInputElement;
  let todoId = 0;
  const [todos, setTodos] = createSignal<Todo[]>([])
  const addTodo = (text: string) => {
    setTodos([...todos(), { id: ++todoId, text, completed: false }]);
  }
  const toggleTodo = (id: number) => {
    setTodos(todos().map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo)
    );
  }
  return (
    <>
      <div>
        <input placeholder="new todo here" ref={input} />
        <button
          onClick={() => {
            if (!input.value.trim()) return;
            addTodo(input.value);
            input.value = "";
          }}
        >
          Add Todo
        </button>
      </div>
      <For each={todos()}>
        {(todo) => {          
          const { id, text } = todo;
          return <div>
            <input
              type="checkbox"
              checked={todo.completed}
              onchange={[toggleTodo, id]}
            />
            <span
              style={{ "text-decoration": todo.completed ? "line-through" : "none" }}
            >{text}</span>
          </div>
        }}
      </For>
    </>
  );
 }
@@ -0,0 +1,13 @@
 {
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"]
  }
 }
@@ -0,0 +1,10 @@
 import { defineConfig } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
 export default defineConfig({
  plugins: [solidPlugin()],
  build: {
    target: 'esnext',
    polyfillDynamicImport: false,
  },
 });