feat: better builds and exported vue

DeFUCC · Apr 26, 2023 · e2dbd5a · e2dbd5a
1 parent 48f03ce
commit e2dbd5a
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 4 deletions.
diff --git a/app/package.json b/app/package.json
@@ -16,13 +16,11 @@
 	},
 	"exports": {
 		".": "./dist/app.js",
-		"./style.css": "./dist/style.css"
+		"./style.css": "./dist/style.css",
+		"./app.iife.js": "./dist/app.iife.js"
 	},
 	"main": "./dist/app.js",
 	"module": "./dist/app.js",
-	"files": [
-		"dist/*"
-	],
 	"scripts": {
 		"build-app": "vite build --emptyOutDir",
 		"build": "vite build --config vite.config.lib.ts",

diff --git a/components/vite.config.ts b/components/vite.config.ts
@@ -5,6 +5,7 @@ import Unocss from 'unocss/vite'
 import path from "path";
 import { fileURLToPath } from "url";
 
+//@ts-ignore
 const filename = fileURLToPath(import.meta.url);
 const dirname = path.dirname(filename);
 
@@ -27,6 +28,8 @@ export default defineConfig({
       name: "components",
       formats: ["es"],
     },
+    assetsInlineLimit: 100000000,
+    chunkSizeWarningLimit: 100000000,
     emptyOutDir: true,
     sourcemap: true,
     rollupOptions: {

diff --git a/docs/vite.config.ts b/docs/vite.config.ts
@@ -13,6 +13,10 @@ export default defineConfig({
   plugins: [
     Unocss(), ViteYaml(),
   ],
+  build: {
+    assetsInlineLimit: 100000000,
+    chunkSizeWarningLimit: 100000000,
+  },
   resolve: {
     alias: {
       "#components": path.resolve(dirname, "../src/components"),

diff --git a/examples/app.html b/examples/app.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://unpkg.com/@gun-vue/components/dist/style.css">
+  <title>Chat example</title>
+  <script type="importmap">
+  {
+    "imports": {
+      "app": "https://unpkg.com/@gun-vue/app"
+    }
+  }
+  </script>
+  <script type="module">
+    import {createGunVueApp} from 'app'
+    createGunVueApp('#app')
+  </script>
+
+</head>
+
+<body>
+
+  <div id="app">
+    <h1>Chat example app!</h1>
+    <gun-relay-list></gun-relay-list>
+    <p> {{message}} </p>
+    <user-icon></user-icon>
+    <chat-room topic="Example chat"></chat-room>
+  </div>
+
+</body>
+
+</html>
diff --git a/examples/app.iife.html b/examples/app.iife.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://unpkg.com/@gun-vue/components/dist/style.css">
+  <title>Chat example</title>
+  <script src="https://unpkg.com/@gun-vue/app@0.16.5/dist/app.iife.js"></script>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      GunVue.createGunVueApp('#app')
+    })
+  </script>
+
+</head>
+
+<body>
+
+  <div id="app">
+    <h1>Chat example app!</h1>
+    <gun-relay-list></gun-relay-list>
+    <p> {{message}} </p>
+    <user-icon></user-icon>
+    <chat-room topic="Example chat"></chat-room>
+  </div>
+
+</body>
+
+</html>
diff --git a/examples/composables.html b/examples/composables.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>@gun-vue/composables test</title>
+  <script type="importmap">
+    {
+      "imports": {
+        "@gun-vue/composables":"https://unpkg.com/@gun-vue/composables"
+      }
+    }
+  </script>
+  <script type="module">
+    import {useUser, SEA, useRoom, useRelay} from "@gun-vue/composables"
+    const {user, auth} = useUser()
+    const {room} = useRoom()
+    const {relay} = useRelay()
+
+    setTimeout(async () => {
+      await login()
+      document.getElementById('pubKey').innerText = user.pub
+      document.getElementById('roomName').innerText = room.profile?.name
+      document.getElementById('roomKey').innerText = room.pub
+      document.getElementById('relay').innerText = relay.peer
+    }, 100)
+
+    async function login() {
+      if (user.is) return console.log('reused user')
+      const pair = await SEA.pair()
+      await auth(pair)
+      console.log('New user created!')
+    }
+
+  </script>
+</head>
+
+<body>
+  <h1>Hello!</h1>
+  <h2>Your pub key is:</h2>
+  <pre id="pubKey"></pre>
+  <h2>You are in the room <span id="roomName"></span></h2>
+  <pre id="roomKey"></pre>
+  <h2>Connected to relay:</h2>
+  <pre id="relay"></pre>
+</body>
+
+</html>
diff --git a/src/composables.ts b/src/composables.ts
@@ -23,6 +23,7 @@ export const rootRoom = config.room
 
 export { default as config } from "../gun.config.json"
 
+export * as vue from 'vue'
 export { gunAvatar } from "gun-avatar"
 export { default as slugify } from "slugify"
 export { default as prettyBytes } from 'pretty-bytes'