BC-5424 - persistent storage for tldraw (#47)

* refactor repo to use Vite

* implement custom user cursors with names

* implement persistent storage support

.dockerignore

@@ -1,5 +1,7 @@
-/node_modules
-Dockerfile
-.git
+.github
+.vscode
+.idea
+node_modules
+Dockerfile.*
 .dockerignore
 .gitignore

.eslintrc.cjs

@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json"],
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ["react-refresh"],
+  rules: {
+    "no-console": "warn",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+};

.gitattributes

@@ -0,0 +1,3 @@
+# Fix end-of-lines in Git versions older than 2.10
+# https://github.com/git/git/blob/master/Documentation/RelNotes/2.10.0.txt#L248
+* text=auto eol=lf

.github/workflows/dependency-review.yml

@@ -13,4 +13,4 @@ jobs:
       - name: 'Dependency Review'
         uses: actions/dependency-review-action@v3
         with:
-          allow-licenses: AGPL-3.0-only, LGPL-3.0, MIT, Apache-2.0, BSD-2-Clause, BSD-3-Clause, ISC, X11, 0BSD, GPL-3.0 AND BSD-3-Clause-Clear, MPL-2.0, CC0-1.0, CC-BY-4.0, Unlicense
+          allow-licenses: MIT, Apache-2.0, BSD-3-Clause, 0BSD, Unlicense

.gitignore

@@ -1,23 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# 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?

.prettierignore

@@ -0,0 +1,4 @@
+**/.github
+**/ansible
+LICENSE.md
+README.md

.prettierrc.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  singleQuote: false,
+  bracketSameLine: true,
+  endOfLine: "lf",
+};

Dockerfile

@@ -8,19 +8,19 @@ WORKDIR /app
 COPY package.json package-lock.json ./
 RUN npm ci
 
-COPY babel.config.js .eslintrc.js craco.config.js LICENSE.md tsconfig.json .prettierrc.js ./
+COPY LICENSE.md .eslintrc.cjs .prettierrc.cjs vite.config.ts tsconfig.json tsconfig.node.json index.html ./
 COPY public ./public
 COPY src ./src
 RUN NODE_ENV=production npm run build
 
 # runtime image stage
-FROM docker.io/nginx:1.25
+FROM docker.io/nginx:1.25-alpine
 
 RUN mkdir /etc/nginx/templates
 
 COPY nginx.conf.template /etc/nginx/templates/default.conf.template
-COPY --from=build-stage /app/build /usr/share/nginx/html
-COPY --from=build-stage /app/build/favicon.ico /usr/share/nginx/html/static/media
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY --from=build-stage /app/dist/favicon.png /app/dist/tldraw-assets.json /usr/share/nginx/html/assets/
 
 EXPOSE 3046
 

README.md

@@ -20,7 +20,7 @@ Docker
 
 2.Navigate to the project directory:
 
-### cd tldraw
+### cd tldraw-client
 
 3.Install the dependencies:
 
@@ -30,7 +30,7 @@ Docker
 
 To run Tldraw in development mode, use the following command:
 
-### npm start
+### npm run dev
 
 This command will start the development server on [http://localhost:3046].
 
@@ -44,18 +44,6 @@ Tldraw can also be run using Docker. To build and run the Docker image, execute
 
 The application will be accessible at [http://localhost:83].
 
-## Formatting and Linting
-
-Tldraw uses the following formatting and linting tools:
-Prettier: A code formatter that helps to ensure a consistent code style.
-ESLint: A linter that helps to find potential errors and problems in code.
-
-To format and lint the code, you can run the following command:
-
-### npm run lint
-
-### npm run lint-fix
-
 ## License
 
 Tldraw is licensed under the AGPL-3.0 license. See the LICENSE file for more information.