Skip to content

Instantly share code, notes, and snippets.

@Lightnet

Lightnet/README.md

Last active August 29, 2022 17:10
Show Gist options
  • Save Lightnet/fe52a25e4c7f1bf664458fdb5ba7a650 to your computer and use it in GitHub Desktop.
Save Lightnet/fe52a25e4c7f1bf664458fdb5ba7a650 to your computer and use it in GitHub Desktop.
Download ZIP
vite solid gun js
Raw
README.md

Manage to get some what working. Required some set up in proxy, plugin and config.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="/gun/gun.js"></script>
<!--
-->
<style>
html, body, canvas{
margin: 0px;
padding: 0px;
width: 100%;
height: 100vh;
}
</style>
<!--
<link rel="stylesheet" href="/styles.css">
-->
</head>
<body>
<div id="app"></div>
<div id="modal"></div>
<script src="./index.jsx" type="module"></script>
</body>
</html>
Raw
index.jsx
/*
License: MIT
Created by: Lightnet
*/
// https://github.com/solidjs/solid-router
// https://www.solidjs.com/docs/latest/api#creatememo
import "./styles.css";
import {
createSignal
, lazy
, observable
, from
, createMemo
, createResource
, createEffect
, onCleanup
} from 'solid-js';
import { MetaProvider } from 'solid-meta';
import { createApp } from 'solid-utils';
import { Router, useRoutes, Link, useParams, useLocation } from 'solid-app-router';
import Home from './pages/index.jsx';
const routes = [
{
path: '/',
component: Home,
},
{
path: '/about',
component: lazy(() => import('./pages/about')),
},
];
const App = () => {
const Route = useRoutes(routes);
const params = useParams();
const location = useLocation();
const pathname = createMemo(() => location.pathname);
//watch variables
createEffect(() => {
//console.log("pathname =", pathname())
});
return (
<>
{pathname() === "/three" ? (
<>
<Link class="btnLink" href="/">Home</Link>
</>
):(
<>
<Link class="btnLink" href="/">Home</Link><span> | </span>
<Link class="btnLink" href="/about">About</Link><span> | </span>
</>
)}
<Route />
</>
);
};
const dispose = createApp(App).use(MetaProvider).use(Router).mount('#app');
if (import.meta.hot) { //< module.hot
//console.log(import.meta.hot)
import.meta.hot.accept() //< module.hot.accept()
import.meta.hot.dispose(dispose) //< module.hot.dispose(dispose)
console.log("Hot Reload...")
}
/*
*/
Raw
package.json
{
"name": "solid-gun",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"start": "vite",
"build": "vite build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"gun": "^0.2020.1238",
"solid-app-router": "^0.4.2",
"solid-js": "^1.5.1",
"solid-meta": "^0.28.1",
"solid-utils": "^0.8.1",
"vite": "^3.0.9",
"vite-plugin-solid": "^2.3.0"
}
}
Raw
pages_about.jsx
/*
License: MIT
Created by: Lightnet
*/
export default function About() {
return <h1>Hello About!!</h1>;
}
Raw
pages_index.jsx
/*
License: MIT
Created by: Lightnet
*/
import { createSignal } from 'solid-js';
export default function Home() {
const [name, setName] = createSignal('Guest');
try{
let gun = GUN("http://127.0.0.1:8000/gun"); //proxy
//let gun = GUN();
gun.get('mark').put({
name: "Mark",
email: "[email protected]",
});
gun.get('mark').on((data, key) => {
console.log("realtime updates:", data);
});
gun.on("hi", peer => {
//peer connect
//console.log('connect peer to',peer);
console.log("peer connect!");
});
gun.on("bye", peer => {
// peer disconnect
//console.log('disconnected from', peer);
console.log("disconnected from peer!");
});
setInterval(() => { gun.get('mark').get('live').put(Math.random()) }, 2000);
}catch(e){
console.log(e)
}
return (
<>
<h1>Hello {name()}</h1>
</>
);
}
Raw
vite-plugin-gun.js
// https://vitejs.dev/guide/api-plugin.html
// https://vitejs.dev/guide/api-plugin.html#client-server-communication
/*
plugin for gun set up that is partly working.
Bug on loop on reload on HMR
gun = Gun({
web: server.httpServer
})
needs work...
Had to create another server proxy for fixed.
*/
import Gun from "gun";
import http from "http";
var gun;
export default function myPlugin() {
return {
name: 'vite-plugin-gun',
configureServer(server) {
server.middlewares.use((req, res, next) => {
// custom handle request...
Gun.serve(req, res, next);
//if (Gun.serve(req, res)) {//get gun.js ex. <script src="/gun.js">
//return next();
//}
})
//console.log(server)
console.log("init gun?")
const _server = http.createServer(function(request, response) {
if (Gun.serve(request, response)) {//get gun.js ex. <script src="/gun.js">
return;
}
})
const PORT = 8000;
_server.listen(PORT, err => {
if (err) throw err;
//console.log(app);
console.log(`> Running on http://localhost:`+PORT);
});
gun = Gun({
file: "data",
//web:app.server //server
//web: server.middlewares
//web: server.middlewares.listen
//web: server.middlewares.listeners
//web: server.middlewares.rawListeners
//web: server.httpServer //work but reload loops
//web: server.listen() // fail
//web: server // fail
//web: server.ws
web: _server
});
gun.on("hi", peer => {
//peer connect
//console.log('connect peer to',peer);
console.log("peer connect!");
});
gun.on("bye", peer => {
// peer disconnect
//console.log('disconnected from', peer);
console.log("disconnected from peer!");
});
}
}
}
Raw
vite.config.js
/*
Project Name: solid-trois
License: MIT
Created by: Lightnet
*/
// https://vitejs.dev/config/server-options.html#server-proxy
// vite.config.ts
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import gunPlugin from "./vite-plugin-gun.js"
export default defineConfig({
server: {
port:3000,
proxy: {
//'/gun': {
//target: 'ws://127.0.0.1:8000/gun',
//target: 'ws://localhost:8000/',
//ws: true,
//secure: false,
//changeOrigin: true,
//}
}
},
plugins: [solidPlugin(),gunPlugin()],
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment