npm - vfront-lib - Versions diffs - 0.0.1 - Mend

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,79 @@
+# VFront
+Simple SPA with Signals.
+### Install
+```bash
+npm i vfront
+```
+index.html
+```html
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vfront</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
+```
+### Create component
+Structure
+```
+├── src/
+│   ├── pages/
+│   │   ├── home/
+│   │   │   ├── home.html
+│   │   │   ├── home.scss
+│   │   │   └── home.ts
+```
+```js
+import { Render, $this } from "vfront";
+export default function Home(params) {
+  // Render(htmlFileUniqueName, objectSignal)
+  Render('home', {
+    name: 'Steve',
+    count: 0,
+    setCount: () => {
+      $this.count += 1;
+    }
+  });
+}
+```
+```html
+<h1>Hello {{name}}.</h1>
+<p>Count: {{count}}</p>
+<button onclick="$this.setCount()">Click here</button>
+```
+### Create route
+```js
+import Home from "./pages/home/home";
+export default {
+  '/': (params) => Home(params)
+}
+```
+### Start app
+```js
+import { App } from 'vfront';
+import routes from './routes';
+App(routes);
+```

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vfront</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/index.js ADDED Viewed

@@ -0,0 +1,5 @@
+export * from "./src/lib/app";
+export * from "./src/lib/dom";
+export * from "./src/lib/event";
+export * from "./src/lib/signal";
+export * from "./src/lib/template";

package/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "vfront-lib",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    "import": "index.js"
+  },
+  "author": "devvime",
+  "license": "MIT",
+  "keywords": [
+    "spa",
+    "routes",
+    "signal",
+    "reactive-proxy"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devvime/VFront.git"
+  },
+  "bugs": {
+    "url": "https://github.com/devvime/VFront/issues"
+  },
+  "homepage": "https://github.com/devvime/VFront#readme",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "sass-embedded": "^1.97.1",
+    "vite": "^7.2.4"
+  },
+  "dependencies": {
+    "handlebars": "^4.7.8",
+    "navigo": "^8.11.1"
+  }
+}

package/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/lib/app.js ADDED Viewed

@@ -0,0 +1,38 @@
+import Navigo from "navigo";
+import Handlebars from "handlebars";
+import { Templates, Styles } from "./template";
+import { Signal } from "./signal";
+import { CreateElement } from "./dom";
+const app = document.getElementById('app');
+export let $this = null;
+export let $app = null;
+export const Router = new Navigo("/", { hash: true });
+export function Render(name, data = {}) {
+  const element = Templates.find(t => t.path.includes(name))?.html;
+  const style = Styles.find(t => t.path.includes(name))?.style;
+  if (element === null || element === undefined) {
+    throw new Error(`Template ${name} is not found.`);
+  }
+  const template = Handlebars.compile(element);
+  const tpl = (values => CreateElement(`<${name}><style>${style}</style>${template(values)}</${name}>`));
+  window.$this = Signal(data, (values) => {
+    app.replaceChildren(tpl(values));
+    window; $app = app;
+  });
+  $this = window.$this;
+  $app = window.$app;
+}
+export function App(routes) {
+  Router.on(routes).resolve();
+}

package/src/lib/dom.js ADDED Viewed

@@ -0,0 +1,18 @@
+export function click(element, callback) {
+  const el = document.querySelector(`[${element}]`);
+  if (el === undefined && el === null) {
+    throw new Error(`Element ${element} is not found.`);
+  }
+  el.addEventListener('click', () => {
+    callback()
+    click(element, callback);
+  });
+}
+export function CreateElement(html) {
+  const template = document.createElement("template");
+  template.innerHTML = (html || "").trim();
+  return template.content.firstElementChild;
+}

package/src/lib/event.js ADDED Viewed

@@ -0,0 +1,8 @@
+export function emit(name, data) {
+  const event = new CustomEvent(name, { detail: data });
+  document.dispatchEvent(event);
+}
+export function output(name, callback) {
+  document.addEventListener(name, callback);
+}

package/src/lib/signal.js ADDED Viewed

@@ -0,0 +1,36 @@
+let activeEffect = null;
+export function signal(value) {
+  const effects = new Set();
+  return {
+    get() {
+      if (activeEffect) effects.add(activeEffect);
+      return value;
+    },
+    set(v) {
+      value = v;
+      effects.forEach(fn => fn());
+    }
+  };
+}
+export function effect(fn) {
+  activeEffect = fn;
+  fn();
+  activeEffect = null;
+}
+export function Signal(obj, callback) {
+  const sig = signal(obj);
+  callback(obj);
+  return new Proxy(obj, {
+    set(target, prop, value) {
+      target[prop] = value;
+      callback(obj);
+      sig.set({ ...target });
+      return true;
+    }
+  });
+}

package/src/lib/template.js ADDED Viewed

@@ -0,0 +1,19 @@
+export const Templates = Object.entries(
+  import.meta.glob('/src/**/*.html', {
+    as: 'raw',
+    eager: true
+  })
+).map(([path, html]) => ({
+  path,
+  html
+}));
+export const Styles = Object.entries(
+  import.meta.glob('/src/**/*.scss', {
+    as: 'raw',
+    eager: true
+  })
+).map(([path, style]) => ({
+  path,
+  style
+}));

package/src/main.js ADDED Viewed

@@ -0,0 +1,5 @@
+import './style.scss';
+import { App } from './lib/app';
+import routes from './routes';
+App(routes);

package/src/pages/home/home.html ADDED Viewed

@@ -0,0 +1,3 @@
+<h1>Hello {{name}}.</h1>
+<p>Count: {{count}}</p>
+<button onclick="$this.setCount()">Click here</button>

package/src/pages/home/home.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { Render, $this } from "../../lib/app";
+export default function Home(params) {
+  Render('home', {
+    name: 'Victor',
+    count: 0,
+    setCount: () => {
+      $this.count += 1;
+    }
+  });
+}

package/src/pages/home/home.scss ADDED Viewed

File without changes

package/src/routes.js ADDED Viewed

@@ -0,0 +1,5 @@
+import Home from "./pages/home/home";
+export default {
+  '/': (params) => Home(params)
+}

package/src/style.scss ADDED Viewed

@@ -0,0 +1,14 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

vfront-lib 0.0.1