[Embeds] Create vite project and add to build pipeline (#3448)

* add bskyembed vite app * create build script (temp until embedr is ready)
bluesky-social · Apr 12, 2024 · ad97d43 · ad97d43
1 parent 24bd3d6
commit ad97d43
Show file tree

Hide file tree

Showing 15 changed files with 3,946 additions and 3 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -32,7 +32,8 @@ RUN \. "$NVM_DIR/nvm.sh" && \
   npm install --global yarn && \
   yarn && \
   yarn intl:build && \
-  yarn build-web
+  yarn build-web && \
+  yarn build-embed
 
 # DEBUG
 RUN find ./bskyweb/static && find ./web-build/static

diff --git a/Makefile b/Makefile
@@ -12,6 +12,7 @@ help: ## Print info about all commands
 build-web: ## Compile web bundle, copy to bskyweb directory
 	yarn intl:build
 	yarn build-web
+	yarn build-embed
 
 .PHONY: test
 test: ## Run all tests

diff --git a/bskyembed/.eslintrc b/bskyembed/.eslintrc
@@ -0,0 +1,20 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "simple-import-sort"],
+  "extends": [
+    "eslint:recommended",
+    "preact",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking"
+  ],
+  "rules": {
+    "simple-import-sort/imports": "warn",
+    "simple-import-sort/exports": "warn"
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": "latest",
+    "project": "./tsconfig.json"
+  }
+}
diff --git a/bskyembed/.gitignore b/bskyembed/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/bskyembed/index.html b/bskyembed/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>Vite App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>
diff --git a/bskyembed/package.json b/bskyembed/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "bskyembed",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx src"
+  },
+  "dependencies": {
+    "preact": "^10.4.8"
+  },
+  "devDependencies": {
+    "@prefresh/vite": "^1.2.1",
+    "eslint": "^8.19.0",
+    "eslint-config-preact": "^1.3.0",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "typescript": "^4.0.5",
+    "vite": "^1.0.0-rc.13",
+    "vite-tsconfig-paths": "^4.3.2"
+  }
+}
diff --git a/bskyembed/src/app.tsx b/bskyembed/src/app.tsx
@@ -0,0 +1,18 @@
+import {Fragment, h} from 'preact'
+
+export function App() {
+  return (
+    <>
+      <p>Hello Vite + Preact!</p>
+      <p>
+        <a
+          className="link"
+          href="https://preactjs.com/"
+          target="_blank"
+          rel="noopener noreferrer">
+          Learn Preact
+        </a>
+      </p>
+    </>
+  )
+}
diff --git a/bskyembed/src/index.css b/bskyembed/src/index.css
@@ -0,0 +1,29 @@
+html, body {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	background: #FAFAFA;
+	font-family: 'Helvetica Neue', arial, sans-serif;
+	font-weight: 400;
+	color: #444;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+  text-align: center;
+  background-color: #673ab8;
+  color: #fff;
+  font-size: 1.5em;
+  padding-top: 100px;
+}
+
+.link {
+  color: #fff;
+}
diff --git a/bskyembed/src/main.tsx b/bskyembed/src/main.tsx
@@ -0,0 +1,9 @@
+import './index.css'
+
+import {h, render} from 'preact'
+
+import {App} from './app'
+
+const root = document.getElementById('app')
+if (!root) throw new Error('No root element')
+render(<App />, root)
diff --git a/bskyembed/tsconfig.json b/bskyembed/tsconfig.json
@@ -0,0 +1,23 @@
+
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": [],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
+  },
+  "include": ["src"]
+}
diff --git a/bskyembed/vite.config.ts b/bskyembed/vite.config.ts
@@ -0,0 +1,18 @@
+import {resolve} from 'node:path'
+
+// @ts-expect-error - not important
+import preactRefresh from '@prefresh/vite'
+import type {UserConfig} from 'vite'
+import paths from 'vite-tsconfig-paths'
+
+const config: UserConfig = {
+  jsx: {
+    factory: 'h',
+    fragment: 'Fragment',
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  plugins: [preactRefresh(), paths()],
+  assetsDir: 'static/embed/assets',
+}
+
+export default config