diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..53c37a1
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+dist
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
index e83a206..d976a56 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,7 @@
"semi": false,
"singleQuote": true,
"trailingComma": "none",
- "printWidth": 120
+ "printWidth": 120,
+ "plugins": ["prettier-plugin-tailwindcss"],
+ "tailwindFunction": ["clsx"]
}
diff --git a/index.html b/index.html
deleted file mode 100644
index 83afb49..0000000
--- a/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
- WebChat
-
-
- WebChat Dev Page
-
-
\ No newline at end of file
diff --git a/manifest.ts b/manifest.ts
index b0e24dd..09f7448 100644
--- a/manifest.ts
+++ b/manifest.ts
@@ -1,6 +1,8 @@
import { defineManifest } from '@crxjs/vite-plugin'
import packageJson from './package.json'
+const isDev = process.env.NODE_ENV === 'development'
+
export default defineManifest({
manifest_version: 3,
name: packageJson.displayName,
@@ -8,7 +10,7 @@ export default defineManifest({
content_scripts: [
{
js: ['src/main.tsx'],
- matches: ['*://www.example.com/*']
+ matches: [isDev ? `*://localhost/*` : '']
}
]
})
diff --git a/package.json b/package.json
index c85557b..a83a15e 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"displayName": "WebChat",
"version": "0.0.1",
"description": "Chatting Anonymously with People on the Same Website.",
+ "type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
@@ -42,7 +43,7 @@
"devDependencies": {
"@commitlint/cli": "^17.6.6",
"@commitlint/config-conventional": "^17.6.6",
- "@crxjs/vite-plugin": "1.0.14",
+ "@crxjs/vite-plugin": "2.0.0-beta.18",
"@ffflorian/jszip-cli": "^3.4.1",
"@iconify/json": "^2.2.90",
"@svgr/core": "^8.0.0",
@@ -69,6 +70,7 @@
"npm-run-all": "^4.1.5",
"postcss": "^8.4.25",
"prettier": "^3.0.0",
+ "prettier-plugin-tailwindcss": "^0.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^5.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd1f1d7..b1010d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,8 +34,8 @@ devDependencies:
specifier: ^17.6.6
version: 17.6.6
'@crxjs/vite-plugin':
- specifier: 1.0.14
- version: 1.0.14(vite@4.4.3)
+ specifier: 2.0.0-beta.18
+ version: 2.0.0-beta.18
'@ffflorian/jszip-cli':
specifier: ^3.4.1
version: 3.4.1
@@ -114,6 +114,9 @@ devDependencies:
prettier:
specifier: ^3.0.0
version: 3.0.0
+ prettier-plugin-tailwindcss:
+ specifier: ^0.4.0
+ version: 0.4.0(prettier@3.0.0)
react:
specifier: ^18.2.0
version: 18.2.0
@@ -567,17 +570,15 @@ packages:
chalk: 4.1.2
dev: true
- /@crxjs/vite-plugin@1.0.14(vite@4.4.3):
- resolution: {integrity: sha512-emOueVCqFRFmpcfT80Xsm4mfuFw9VSp5GY4eh5qeLDeiP81g0hddlobVQCo0pE2ZvNnWbyhLrXEYAaMAXjNL6A==}
- engines: {node: '>=14'}
- peerDependencies:
- vite: ^2.9.0
+ /@crxjs/vite-plugin@2.0.0-beta.18:
+ resolution: {integrity: sha512-3jW20cUE04wTTg8HtoQD7bIL4Nhu91pRX4PHazMu2/tzzSTaR4stW5DHRIJOjFuRpOSCNNpyamyXwxS6qOv7Bg==}
dependencies:
'@rollup/pluginutils': 4.2.1
'@webcomponents/custom-elements': 1.6.0
acorn-walk: 8.2.0
cheerio: 1.0.0-rc.12
connect-injector: 0.4.4
+ convert-source-map: 1.9.0
debug: 4.3.4
es-module-lexer: 0.10.5
fast-glob: 3.3.0
@@ -586,10 +587,8 @@ packages:
magic-string: 0.26.7
picocolors: 1.0.0
react-refresh: 0.13.0
- rollup: 2.79.1
- vite: 4.4.3(@types/node@20.4.2)
- optionalDependencies:
- '@vitejs/plugin-react': 4.0.3(vite@4.4.3)
+ rollup: 2.78.1
+ rxjs: 7.5.7
transitivePeerDependencies:
- supports-color
dev: true
@@ -5542,6 +5541,61 @@ packages:
fast-diff: 1.3.0
dev: true
+ /prettier-plugin-tailwindcss@0.4.0(prettier@3.0.0):
+ resolution: {integrity: sha512-Rna0sDPETA0KNhMHlN8wxKNgfSa8mTl2hPPAGxnbv6tUcHT6J4RQmQ8TLXyhB7Dm5Von4iHloBxTyClYM6wT0A==}
+ engines: {node: '>=12.17.0'}
+ peerDependencies:
+ '@ianvs/prettier-plugin-sort-imports': '*'
+ '@prettier/plugin-pug': '*'
+ '@shopify/prettier-plugin-liquid': '*'
+ '@shufo/prettier-plugin-blade': '*'
+ '@trivago/prettier-plugin-sort-imports': '*'
+ prettier: ^2.2 || ^3.0
+ prettier-plugin-astro: '*'
+ prettier-plugin-css-order: '*'
+ prettier-plugin-import-sort: '*'
+ prettier-plugin-jsdoc: '*'
+ prettier-plugin-marko: '*'
+ prettier-plugin-organize-attributes: '*'
+ prettier-plugin-organize-imports: '*'
+ prettier-plugin-style-order: '*'
+ prettier-plugin-svelte: '*'
+ prettier-plugin-twig-melody: '*'
+ peerDependenciesMeta:
+ '@ianvs/prettier-plugin-sort-imports':
+ optional: true
+ '@prettier/plugin-pug':
+ optional: true
+ '@shopify/prettier-plugin-liquid':
+ optional: true
+ '@shufo/prettier-plugin-blade':
+ optional: true
+ '@trivago/prettier-plugin-sort-imports':
+ optional: true
+ prettier-plugin-astro:
+ optional: true
+ prettier-plugin-css-order:
+ optional: true
+ prettier-plugin-import-sort:
+ optional: true
+ prettier-plugin-jsdoc:
+ optional: true
+ prettier-plugin-marko:
+ optional: true
+ prettier-plugin-organize-attributes:
+ optional: true
+ prettier-plugin-organize-imports:
+ optional: true
+ prettier-plugin-style-order:
+ optional: true
+ prettier-plugin-svelte:
+ optional: true
+ prettier-plugin-twig-melody:
+ optional: true
+ dependencies:
+ prettier: 3.0.0
+ dev: true
+
/prettier@3.0.0:
resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==}
engines: {node: '>=14'}
@@ -5931,8 +5985,8 @@ packages:
glob: 10.3.3
dev: true
- /rollup@2.79.1:
- resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
+ /rollup@2.78.1:
+ resolution: {integrity: sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==}
engines: {node: '>=10.0.0'}
hasBin: true
optionalDependencies:
@@ -5966,6 +6020,12 @@ packages:
dependencies:
queue-microtask: 1.2.3
+ /rxjs@7.5.7:
+ resolution: {integrity: sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==}
+ dependencies:
+ tslib: 2.6.0
+ dev: true
+
/rxjs@7.8.1:
resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
dependencies:
diff --git a/src/App.tsx b/src/App.tsx
index 5df419d..eb8f267 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,34 +1,42 @@
-import { useState } from 'react'
-import IconPower from '~icons/pixelarticons/power'
-
+import Header from '@/components/Header'
+import Footer from '@/components/Footer'
+import Main from '@/components/Main'
import Sidebar from '@/components/Sidebar'
+import AppButton from './components/AppButton'
export default function App() {
- const [open, setOpen] = useState(false)
- const [openedOnce, setOpenedOnce] = useState(false)
-
return (
<>
-
-
{
- setOpen((open) => !open)
- setOpenedOnce(true)
- }}
- >
-
-
-
- {openedOnce && (
-
-
-
- )}
+
+
+
+
+
+
+
>
+
+ // <>
+ //
+ //
{
+ // setOpen((open) => !open)
+ // setOpenedOnce(true)
+ // }}
+ // >
+ //
+ //
+ //
+ // {openedOnce && (
+ //
+ //
+ //
+ // )}
+ // >
)
}
diff --git a/src/components/AppButton.tsx b/src/components/AppButton.tsx
new file mode 100644
index 0000000..7dcb007
--- /dev/null
+++ b/src/components/AppButton.tsx
@@ -0,0 +1,10 @@
+import { type FC } from 'react'
+import { Button } from '@/components/ui/Button'
+
+const AppButton: FC = () => {
+ return (
+
+ )
+}
+
+export default AppButton
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..073eafd
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,7 @@
+import { type FC } from 'react'
+
+const Footer: FC = () => {
+ return
+}
+
+export default Footer
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..26fa45a
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,7 @@
+import { type FC } from 'react'
+
+const Header: FC = ({ ...props }) => {
+ return
+}
+
+export default Header
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
new file mode 100644
index 0000000..ad7c014
--- /dev/null
+++ b/src/components/Main.tsx
@@ -0,0 +1,7 @@
+import { type FC } from 'react'
+
+const Main: FC = () => {
+ return
+}
+
+export default Main
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 1d9698f..ce0a729 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,15 +1,7 @@
-import Logo from '@/components/Logo'
-import { Textarea } from '@/components/ui/textarea'
-import { Button } from '@/components/ui/button'
+import { type FC } from 'react'
-export default function Sidebar() {
- return (
-
-
- Sidebar123
- This is the sidebar page
-
-
-
- )
+const Sidebar: FC = () => {
+ return
}
+
+export default Sidebar
diff --git a/src/index.css b/src/index.css
index e453cc6..4d06067 100644
--- a/src/index.css
+++ b/src/index.css
@@ -74,5 +74,9 @@
}
:host {
@apply bg-background text-foreground;
+
+ /* Disabled inherit */
+ all: initial;
+ direction: ltr;
}
}
diff --git a/src/main.tsx b/src/main.tsx
index a959380..d423170 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,15 @@
import React from 'react'
import App from './App'
import createShadowRoot from './createShadowRoot'
-
import style from './index.css?inline'
+// TODO: css hmr not work
+// https://github.com/crxjs/chrome-extension-tools/issues/671
void (() => {
- createShadowRoot(__NAME__, { style, mode: __DEV__ ? 'open' : 'closed' }).render(
+ createShadowRoot(__NAME__, {
+ style,
+ mode: __DEV__ ? 'open' : 'closed'
+ }).render(
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6e0f7fc..4b18a86 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -11,6 +11,9 @@ module.exports = {
}
},
extend: {
+ zIndex: {
+ top: '2147483647'
+ },
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
diff --git a/vite.config.ts b/vite.config.ts
index 75be72b..6321fe6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,17 +6,16 @@ import Icons from 'unplugin-icons/vite'
import manifest from './manifest'
import packageJson from './package.json'
+const isDev = process.env.NODE_ENV === 'development'
+
export default defineConfig({
- server: {
- open: './index.html'
- },
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
},
define: {
- __DEV__: process.env.NODE_ENV !== 'production',
+ __DEV__: isDev,
__NAME__: JSON.stringify(packageJson.name)
},
plugins: [