mirror of
https://github.com/Rolands-Laucis/Socio.git
synced 2026-05-15 14:15:57 -06:00
delete old demo
This commit is contained in:
Rolands
parent
9b84d93cac
commit
278103de50
18 changed files with 0 additions and 3951 deletions
198
demos/framework/.gitignore
vendored
198
demos/framework/.gitignore
vendored
|
|
@ -1,198 +0,0 @@
|
|||
#mine
|
||||
|
||||
|
||||
# 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?
|
||||
|
||||
# Created by https://www.toptal.com/developers/gitignore/api/node,visualstudiocode,svelte
|
||||
# Edit at https://www.toptal.com/developers/gitignore?templates=node,visualstudiocode,svelte
|
||||
|
||||
### Node ###
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
### Node Patch ###
|
||||
# Serverless Webpack directories
|
||||
.webpack/
|
||||
|
||||
# Optional stylelint cache
|
||||
|
||||
# SvelteKit build / generate output
|
||||
.svelte-kit
|
||||
|
||||
### Svelte ###
|
||||
# gitignore template for the SvelteKit, frontend web component framework
|
||||
# website: https://kit.svelte.dev/
|
||||
|
||||
.svelte-kit/
|
||||
package
|
||||
|
||||
### VisualStudioCode ###
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
### VisualStudioCode Patch ###
|
||||
# Ignore all local history of files
|
||||
.history
|
||||
.ionide
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode,svelte
|
||||
3
demos/framework/.vscode/extensions.json
vendored
3
demos/framework/.vscode/extensions.json
vendored
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"recommendations": ["svelte.svelte-vscode"]
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
# This is a simple locally runnable demonstration of the Socio lib and how to use it within a frontend framework like Svelte. Only depends on having Node installed.
|
||||
|
||||
* Download or clone this repo
|
||||
* ```cd demos/framework```
|
||||
* ```npm i```
|
||||
|
||||
In 2 paralel terminals:
|
||||
* ```npm run dev``` for the Svelte-Vite dev server
|
||||
* ```npm run soc``` for the WebSocketServer
|
||||
|
||||
_if it prints an import error, that might be bcs locally i test by npm linking the local package and have commented out the import of the released npm package. You can find the import and switch the commented lines._
|
||||
|
||||
* Visi the Svelte dev server URL on one or multiple tabs or browser instances.
|
||||
* Then press the big INSERT button, which will insert a new row into the DB on that table.
|
||||
* Then you should see the subscribed queries update their values to whatever the queries returned.
|
||||
|
||||
As you will notice, all instances of the browsers and their tabs update their values. This is because the API isnt built with the REST method, but rather with WebSockets, which means the server can push its updates to the clients, if they have registered to receive them. Instead of the traditional way of pooling resquests.
|
||||
|
||||
This is powerful because you nolonger need to write a REST API middle layer between front and back end and manually sync states and data. This is all done automatically for you. As well as no need to write DB query interfacing middle layers, since your SQL queries can just sit in one place - the front end.
|
||||
|
||||
Notice how this demo also makes the SQL secure on the frontend - by encrypting the raw sql string, such that it cannot be altered or decrypted by anything other than the serving server and is not human readable. To do this, the SQL queries are in a more strict format - written in double quote string format and the sql ends with a comment "--socio" (which is ignored during encrypting and decrypting). This is all done for you via the SocioSecure class and/or the included Vite plugin :)
|
||||
|
||||
## Next check out the ``App.svelte`` file to see how the magic is done on the frontend - its super simple ;)
|
||||
## And check out ``vite.config.js`` to see how to use the Vite plugin and ``core/secure.js`` to see how to use the raw class to do all this as well without a bundler
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;400;700&family=Trispace:wght@100;200&display=swap"
|
||||
rel="stylesheet">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Socio demo - framework - Svelte</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "Node",
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
/**
|
||||
* svelte-preprocess cannot figure out whether you have
|
||||
* a value or a type, so tell TypeScript to enforce using
|
||||
* `import type` instead of `import` for Types.
|
||||
*/
|
||||
"importsNotUsedAsValues": "error",
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
* To have warnings / errors of the Svelte compiler at the
|
||||
* correct position, enable source maps by default.
|
||||
*/
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable this if you'd like to use dynamic types.
|
||||
*/
|
||||
"checkJs": true
|
||||
},
|
||||
/**
|
||||
* Use global.d.ts instead of compilerOptions.types
|
||||
* to avoid limiting type declarations.
|
||||
*/
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
|
||||
}
|
||||
3305
demos/framework/package-lock.json
generated
3305
demos/framework/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,23 +0,0 @@
|
|||
{
|
||||
"name": "Socio demo - framework",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"soc": "node server.js",
|
||||
"dev": "vite --port 5000",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^1.1.0",
|
||||
"svelte": "^3.52.0",
|
||||
"vite": "^3.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@rolands/log": "^1.1.1",
|
||||
"sequelize": "^6.25.3",
|
||||
"socio": "^0.1.0",
|
||||
"sqlite3": "^5.1.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import { SocioServer } from '../../core/core.js' //i use this locally
|
||||
import { SocioSecurity } from '../../core/secure.js' //i use this locally
|
||||
// import {SocioServer} from 'socio/core.js' //for using the lib as a download from npm
|
||||
// import { SocioSecurity } from 'socio/secure.js' //for using the lib as a download from npm
|
||||
|
||||
import { Sequelize } from 'sequelize';
|
||||
import { log, done, setPrefix, setShowTime } from '@rolands/log'; setPrefix('SERVER'); setShowTime(false);
|
||||
|
||||
//constants
|
||||
const ws_port = 3000 //can be set up that the websockets run on the same port as the http server
|
||||
|
||||
//init local RAM DB with 1 table - "users" and 2 rows.
|
||||
const sequelize = new Sequelize('sqlite::memory:');
|
||||
await sequelize.query('CREATE TABLE Users(name varchar(50), num INTEGER NOT NULL DEFAULT 0);')
|
||||
await sequelize.query('INSERT INTO Users VALUES("Jane", 42);')
|
||||
await sequelize.query('INSERT INTO Users VALUES("John", 69);')
|
||||
|
||||
//set up the WebSocket SocioServer and give it the DB querying function that comes from whatever your DB interface lib provides.
|
||||
//it needs the raw sql string, which can contain formatting parameters - insert dynamic data into the string.
|
||||
//Either you in a wrapper function or your DB interface lib should do the sql validation and sanitization, as this lib does not!
|
||||
async function QueryWrap({ id = 0, sql = '', params = {} } = {}){
|
||||
return (await sequelize.query(sql, { logging: false, raw: true, replacements: params }))[0]
|
||||
}
|
||||
|
||||
//note that these key and iv are here for demonstration purposes and you should always generate your own. You may also supply any cipher algorithm supported by node's crypto module.
|
||||
//It is always advised to load these keys from a .env file!
|
||||
const socsec = new SocioSecurity({ secure_private_key: 'skk#$U#Y$7643GJHKGDHJH#$K#$HLI#H$KBKDBDFKU34534', cipher_iv: 'dsjkfh45h4lu45ilULIY$%IUfdjg', verbose:true })
|
||||
const socserv = new SocioServer({ port: ws_port }, QueryWrap, { verbose: true, secure: socsec })
|
||||
|
||||
done(`Created SocioServer on port`, ws_port)
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
<script>
|
||||
//imports:
|
||||
import { SocioClient } from '../../../core/core-client.js' //for local lib dev testing
|
||||
// import { SocioClient } from 'socio/core-client.js' //use the lib in a project as downloaded from npm
|
||||
import {onMount} from 'svelte'
|
||||
import {slide} from 'svelte/transition'
|
||||
|
||||
//svelte components:
|
||||
import Nav from "./nav.svelte";
|
||||
import Code from './code.svelte'
|
||||
import Spinner from './spinner.svelte'
|
||||
import Button from './button.svelte'
|
||||
|
||||
let sc = null
|
||||
let clienID = false
|
||||
const simple_sql_arith = "SELECT 42+69 AS RESULT;--socio";
|
||||
const static_queries = [{text:'once:', sql:simple_sql_arith}, {text:'once:', sql:"SELECT COUNT(*) AS RESULT FROM users;--socio"}]
|
||||
let users = [], bob_count=0;
|
||||
const insert_fields = {name:'Bob', num:420}
|
||||
|
||||
onMount(async ()=>{
|
||||
sc = new SocioClient('ws://localhost:3000', {verbose:true, name:'Main'})
|
||||
await sc.ready()
|
||||
clienID = sc.client_id
|
||||
|
||||
sc.subscribe({ sql: "SELECT COUNT(*) AS RESULT FROM users WHERE name = :name;--socio", params: { name: 'Bob' } }, (res) => {
|
||||
bob_count = res[0].RESULT //res is whatever object your particular DB interface lib returns from a raw query
|
||||
})
|
||||
|
||||
sc.subscribe({ sql: "SELECT * FROM users;--socio"}, (res) => {
|
||||
users = res //res is whatever object your particular DB interface lib returns from a raw query
|
||||
})
|
||||
|
||||
console.log(await sc.query("SELECT 42+69 AS RESULT;--socio;"))
|
||||
})
|
||||
</script>
|
||||
|
||||
<Nav></Nav>
|
||||
<main>
|
||||
<h1>Socio framework secured use demonstration - Svelte</h1>
|
||||
{#if clienID}
|
||||
<div class="horiz">
|
||||
<h2 id="ready" class="status">Ready.</h2>
|
||||
<h3>client ID: {clienID}</h3>
|
||||
</div>
|
||||
|
||||
{#each static_queries as q}
|
||||
<h2 class="row horiz">
|
||||
<h3>{q.text}</h3><Code on:click={() => q.sql = q.sql}>{q.sql}</Code> =
|
||||
{#await sc.query(q.sql)}
|
||||
<Spinner></Spinner>
|
||||
{:then res}
|
||||
<span class="num grad_clip">{res[0].RESULT}</span>
|
||||
{/await}
|
||||
</h2>
|
||||
{/each}
|
||||
|
||||
<div class="horiz">
|
||||
<Button on:click={async () => await sc.query("INSERT INTO users VALUES(:name, :num);--socio", insert_fields)} bind:name={insert_fields.name} bind:num={insert_fields.num}></Button>
|
||||
<input type="text" bind:value={insert_fields.name}>
|
||||
<input type="number" bind:value={insert_fields.num}>
|
||||
</div>
|
||||
|
||||
<h2 class="row horiz">
|
||||
<h3>subscribed:</h3>
|
||||
<Code>SELECT COUNT(*) AS RESULT FROM users WHERE name = :name; && :name = 'Bob'</Code>
|
||||
=
|
||||
<span class="num grad_clip">{bob_count}</span>
|
||||
</h2>
|
||||
{:else}
|
||||
<h2 id="ready" class="status">Not Ready!</h2>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
{#if users}
|
||||
<section>
|
||||
<div class="users">
|
||||
<div class="horiz"><h3>subscribed:</h3> <Code>SELECT * AS RESULT FROM users;</Code>=</div>
|
||||
<h2 class="grad_clip">{'{'}</h2>
|
||||
{#each users as u}
|
||||
<div class="horiz user_row" transition:slide>
|
||||
<h2>name: <span class="grad_clip">{u.name}</span></h2>
|
||||
<h2>num: <span class="grad_clip">{u.num}</span></h2>
|
||||
</div>
|
||||
{/each}
|
||||
<h2 class="grad_clip">{'}'}</h2>
|
||||
</div>
|
||||
|
||||
<h3>Check the dev console for verbose logs and the network panel for websocket connection messages ;)</h3>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<style lang="css">
|
||||
main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
section{
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.horiz{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
}
|
||||
.users{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.user_row{
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input{
|
||||
background-color: #292929;
|
||||
border: 1px solid #9c9c9c;
|
||||
border-radius: 4px;
|
||||
width: 150px;
|
||||
font-size: 25px;
|
||||
padding: 4px 8px;
|
||||
transition: var(--trans);
|
||||
}
|
||||
input:hover{
|
||||
background-color: #383838;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<script>
|
||||
export let name, num;
|
||||
</script>
|
||||
|
||||
<button on:click>
|
||||
INSERT INTO users VALUES("{name}", {num});
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button{
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
background: var(--grad);
|
||||
background-position: 50% 0px;
|
||||
background-size: 150%;
|
||||
color: #fff;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
filter: var(--shad);
|
||||
|
||||
transition: var(--trans);
|
||||
}
|
||||
button:hover{
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<span class="code" on:click title="Click to refresh!">
|
||||
<slot></slot>
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.code{
|
||||
font-family: 'Trispace', monospace;
|
||||
font-weight: 100;
|
||||
font-size: 19.20px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #292929;
|
||||
border: 1px solid #9c9c9c;
|
||||
transition: var(--trans);
|
||||
filter: var(--shad);
|
||||
}
|
||||
.code:hover{
|
||||
background-color: #383838;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
:root {
|
||||
font-family: 'Josefin Sans', 'Open Sans', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: dark;
|
||||
color: white;
|
||||
background-color: #16161b;
|
||||
|
||||
--accent1: #ee3a46;
|
||||
--accent2: #6418a3;
|
||||
--grad: linear-gradient(45deg, var(--accent1) 0%, var(--accent1) 40%, var(--accent2) 90%, var(--accent2) 100%);
|
||||
--shad: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.192));
|
||||
--trans: 150ms ease-in-out;
|
||||
}
|
||||
|
||||
html, body, #app {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
#app{padding: 32px;}
|
||||
h1,h2,h3,h4,a{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
filter: var(--shad);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48.83px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 31.25px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
color: #5a5a5f;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.grad_clip {
|
||||
background: var(--grad);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-position: 30% 0px;
|
||||
background-size: 130%;
|
||||
transition: var(--trans);
|
||||
}
|
||||
.grad_clip:hover {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import './global.css'
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app')
|
||||
})
|
||||
|
||||
export default app
|
||||
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<nav>
|
||||
<h2 class="grad_clip">Socio</h2>
|
||||
<a href="https://github.com/Rolands-Laucis/Socio.js" style="color: var(--accent2);">github</a>
|
||||
<a href="https://www.npmjs.com/package/socio" style="color: var(--accent2);">npm</a>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
<script>
|
||||
export let style=''
|
||||
</script>
|
||||
|
||||
<div class="spinner" {style}></div>
|
||||
|
||||
<style>
|
||||
.spinner{
|
||||
--thicc: 5px;
|
||||
height: 32px;
|
||||
aspect-ratio: 1/1;
|
||||
border: 5px solid;
|
||||
border-color: var(--accent1) transparent var(--accent2) transparent;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
||||
animation: spin 1s ease-in-out infinite forwards;
|
||||
}
|
||||
@keyframes spin{
|
||||
from{transform: rotate(0deg);}
|
||||
to{transform: rotate(720deg);}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { writable } from 'svelte/store'
|
||||
|
||||
export const count = writable(0)
|
||||
2
demos/framework/src/vite-env.d.ts
vendored
2
demos/framework/src/vite-env.d.ts
vendored
|
|
@ -1,2 +0,0 @@
|
|||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
import { SocioSecurityPlugin } from '../../core/secure.js'
|
||||
// import { SocioSecurityPlugin } from 'socio/secure.js'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
svelte(),
|
||||
//note that these key and iv are here for demonstration purposes and you should always generate your own. You may also supply any cipher algorithm supported by node's crypto module
|
||||
SocioSecurityPlugin({ secure_private_key: 'skk#$U#Y$7643GJHKGDHJH#$K#$HLI#H$KBKDBDFKU34534', cipher_iv: 'dsjkfh45h4lu45ilULIY$%IUfdjg', verbose: true })
|
||||
]
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue