Add demo app

Copy pasted from #186
wix-incubator · Nov 7, 2024 · 2770d2a · 2770d2a
1 parent 3d7b8d4
commit 2770d2a
Show file tree

Hide file tree

Showing 20 changed files with 6,587 additions and 0 deletions.
diff --git a/packages/eslint-plugin-obsidian/demo/.eslintrc.cjs b/packages/eslint-plugin-obsidian/demo/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+};
diff --git a/packages/eslint-plugin-obsidian/demo/.eslintrc.json b/packages/eslint-plugin-obsidian/demo/.eslintrc.json
@@ -0,0 +1,43 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["react", "@typescript-eslint", "import", "obsidian"],
+  "rules": {
+    "@typescript-eslint/no-namespace": "off",
+    "no-empty-function": "off",
+    "@typescript-eslint/no-empty-function": "error",
+    "@typescript-eslint/no-non-null-assertion": "error",
+    "obsidian/unresolved-provider-dependencies": "error",
+    "obsidian/no-circular-dependencies": "error",
+    "obsidian/strongly-typed-inject-component": "error"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
+    }
+  }
+}
diff --git a/packages/eslint-plugin-obsidian/demo/.gitignore b/packages/eslint-plugin-obsidian/demo/.gitignore
@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.yalc
+.yarn/cache
+.yarn/install-state.gz
diff --git a/packages/eslint-plugin-obsidian/demo/.prettierrc b/packages/eslint-plugin-obsidian/demo/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/packages/eslint-plugin-obsidian/demo/README.md b/packages/eslint-plugin-obsidian/demo/README.md
@@ -0,0 +1,28 @@
+# Getting Start
+
+Install `yalc` to troubleshoot
+
+In the `swc-plugin-obsidian` run `yalc publish`
+
+Within the `vite-app` folder, run `yarn install`
+
+Run `yalc add [email protected]`
+
+Run `yarn dev` to spin up the project and open in browser at `http://localhost:5173/`
+
+Open the plugin inspector at `http://localhost:5173/__inspect/`
+
+## Running Tests
+
+There is a minimal test that can be run with `yarn test`. It will assert against the dom to check if the dependency was injected correctly.
+
+## Notes
+
+The obsidian plugin is commented out by default in the `vite.config.ts` file.
+Uncomment this line and it's import to begin troubleshooting.
+
+## Known Issues
+
+The `obsidian` plugin interferes with the react plugin, which automagically imports `React` into any tsx files. So there is as compile error that the `React` import was not found. You can work around this by importing `React` in `main.tsx` but this shouldn't be necessary.
+
+The `obsidian` plugin seems to mangle _any_ ts and tsx file. Ideally, it should only mangle files with obsidian decorators.
diff --git a/packages/eslint-plugin-obsidian/demo/index.html b/packages/eslint-plugin-obsidian/demo/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Todo DDD</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/eslint-plugin-obsidian/demo/package.json b/packages/eslint-plugin-obsidian/demo/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "example-vite-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build --base=/react-todo-app-ddd-service",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write .",
+    "format:ci": "prettier --check .",
+    "test": "vitest",
+    "test:ci": "vitest run",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "eslint-plugin-obsidian": "^2.11.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-obsidian": "^2.11.4",
+    "swc-plugin-obsidian": "file:.yalc/swc-plugin-obsidian"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.3.2",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.3",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "jsdom": "^24.1.0",
+    "prettier": "^3.2.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.4.9",
+    "vite-plugin-inspect": "^0.8.7",
+    "vitest": "^1.6.0"
+  }
+}
diff --git a/packages/eslint-plugin-obsidian/demo/public/vite.svg b/packages/eslint-plugin-obsidian/demo/public/vite.svg
diff --git a/packages/eslint-plugin-obsidian/demo/setupTests.ts b/packages/eslint-plugin-obsidian/demo/setupTests.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/packages/eslint-plugin-obsidian/demo/src/ErrorPage.tsx b/packages/eslint-plugin-obsidian/demo/src/ErrorPage.tsx
@@ -0,0 +1,20 @@
+import { useRouteError } from 'react-router-dom';
+
+export const ErrorPage = () => {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{isError(error) ? error.message : 'Unknown Error'}</i>
+      </p>
+    </div>
+  );
+};
+
+const isError = (error: unknown): error is Error => {
+  return error instanceof Error;
+};
diff --git a/packages/eslint-plugin-obsidian/demo/src/Example/DependencyGraph.ts b/packages/eslint-plugin-obsidian/demo/src/Example/DependencyGraph.ts
@@ -0,0 +1,11 @@
+import { Singleton, Graph, ObjectGraph, Provides } from 'react-obsidian';
+
+@Singleton()
+@Graph()
+export class DependencyGraph extends ObjectGraph {
+  // @Provides({ name: 'hello' })
+  @Provides()
+  hello(): string {
+    return 'hello';
+  }
+}
diff --git a/packages/eslint-plugin-obsidian/demo/src/Example/index.test.tsx b/packages/eslint-plugin-obsidian/demo/src/Example/index.test.tsx
@@ -0,0 +1,13 @@
+import { expect, describe } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Example } from '.';
+
+describe('Example', () => {
+  it('should render hello', async () => {
+    render(<Example />);
+
+    await waitFor(() =>
+      expect(screen.getByText('hello')).toBeInTheDocument(),
+    );
+  });
+});
diff --git a/packages/eslint-plugin-obsidian/demo/src/Example/index.tsx b/packages/eslint-plugin-obsidian/demo/src/Example/index.tsx
@@ -0,0 +1,17 @@
+import { DependenciesOf, injectComponent } from 'react-obsidian';
+import { DependencyGraph } from './DependencyGraph';
+
+type Injected = DependenciesOf<DependencyGraph, 'hello'>;
+
+const _Example = ({ hello }: Injected) => {
+  return (
+    <div>
+      {hello || `uh oh, it didn't work`}
+    </div>
+  );
+};
+
+export const Example = injectComponent(
+  _Example,
+  DependencyGraph,
+);
diff --git a/packages/eslint-plugin-obsidian/demo/src/main.tsx b/packages/eslint-plugin-obsidian/demo/src/main.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Example } from './Example';
+
+async function prepare() {
+}
+
+prepare().then(() => {
+  ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+      <Example />
+    </React.StrictMode>,
+  );
+});
diff --git a/packages/eslint-plugin-obsidian/demo/src/vite-env.d.ts b/packages/eslint-plugin-obsidian/demo/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/eslint-plugin-obsidian/demo/tsconfig.json b/packages/eslint-plugin-obsidian/demo/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "src/*": ["./src/*"]
+    },
+    "experimentalDecorators": true
+  },
+  "include": ["**/*.ts", "**/*.tsx", "src"],
+  "exclude": ["node_modules"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/eslint-plugin-obsidian/demo/tsconfig.node.json b/packages/eslint-plugin-obsidian/demo/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/eslint-plugin-obsidian/demo/vite.config.ts b/packages/eslint-plugin-obsidian/demo/vite.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import Inspect from 'vite-plugin-inspect'
+import obsidian from 'swc-plugin-obsidian/dist'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    // (obsidian as any).default(), // UNCOMMENT TO TROUBLESHOOT
+    obsidian.default(),
+    Inspect(),
+  ],
+  resolve: {
+    alias: {
+      src: '/src',
+    },
+  },
+  base: '/',
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './setupTests.ts',
+  },
+});
diff --git a/packages/eslint-plugin-obsidian/demo/yalc.lock b/packages/eslint-plugin-obsidian/demo/yalc.lock
@@ -0,0 +1,10 @@
+{
+  "version": "v1",
+  "packages": {
+    "swc-plugin-obsidian": {
+      "version": "3.0.0-alpha.8",
+      "signature": "a8e826c8c1f70bab5eb38a35fdbc1ae9",
+      "file": true
+    }
+  }
+}