npm - vaderjs - Versions diffs - 2.2.6 → 2.3.0 - Mend

vaderjs 2.2.6 → 2.3.0

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 (13) hide show

package/README.MD +61 -39
package/cli.ts +186 -0
package/index.ts +839 -688
package/jsconfig.json +2 -2
package/main.js +414 -600
package/package.json +1 -1
package/plugins/index.ts +63 -0
package/plugins/tailwind.ts +2 -0
package/README.md +0 -89
package/bun.lockb +0 -0
package/bundler/index.js +0 -295
package/document/index.ts +0 -77
package/examples/counter/index.jsx +0 -10

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "vaderjs",
-    "version": "2.2.6",
+    "version": "2.3.0",
     "description": "A simple and powerful JavaScript library for building modern web applications.",
     "bin": {
         "vaderjs": "./main.js"

package/plugins/index.ts ADDED Viewed

@@ -0,0 +1,63 @@
+// vaderPlugin.d.ts
+/** The API object passed to plugin hooks */
+export interface VaderAPI {
+  /** Run a shell command (string or string[]) and wait for it to finish */
+  runCommand(cmd: string | string[]): Promise<void>;
+  /** Inject arbitrary HTML into the <head> of generated index.html files */
+  injectHTML(content: string): void;
+  /** Log a message prefixed with [Vader Plugin] */
+  log(msg: string): void;
+  /** Get absolute path to the project root */
+  getProjectRoot(): string;
+  /** Get absolute path to the dist output directory */
+  getDistDir(): string;
+  /** Get absolute path to the public assets directory */
+  getPublicDir(): string;
+}
+/** Supported plugin hook names */
+export type PluginHookName =
+  | "onBuildStart"
+  | "onBuildFinish"
+  | "onWatchStart"
+  | "onWatchStop"
+  | "onServeStart"
+  | "onServeStop"
+  | "onFileChange";
+/** Interface for a single plugin */
+export interface VaderPlugin {
+  /** Called before build starts */
+  onBuildStart?(api: VaderAPI): Promise<void> | void;
+  /** Called after build finishes */
+  onBuildFinish?(api: VaderAPI): Promise<void> | void;
+  /** Called when watcher starts (dev mode) */
+  onWatchStart?(api: VaderAPI): Promise<void> | void;
+  /** Called when watcher stops (dev mode) */
+  onWatchStop?(api: VaderAPI): Promise<void> | void;
+  /** Called when dev server starts */
+  onServeStart?(api: VaderAPI): Promise<void> | void;
+  /** Called when dev server stops */
+  onServeStop?(api: VaderAPI): Promise<void> | void;
+  /** Called on file change during watch, with changed file path */
+  onFileChange?(api: VaderAPI, filePath: string): Promise<void> | void;
+}
+/** User config type */
+export interface VaderConfig {
+  port?: number;
+  host_provider?: string;
+  plugins?: VaderPlugin[];
+}

package/plugins/tailwind.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 //@ts-nocheck
 import fs from 'fs'
 import path from 'path'
+import type { VaderPlugin, VaderAPI } from "vaderjs/plugins";
 function checkIfTailwindInstalled() {
     try {
         //@ts-ignore

package/README.md DELETED Viewed

@@ -1,89 +0,0 @@
-<p align="center">
-  <a href="https://vader-js.pages.dev">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="/icon.jpeg">
-      <img src="https://github.com/Postr-Inc/Vader.js/blob/main/logo.png" height="128">
-    </picture>
-    <h1 align="center">Vader.js</h1>
-  </a>
-</p>
-# Vader.js A reactive framework for building fast and scalable web applications
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/vaderjs.svg?style=flat)](https://www.npmjs.com/package/vaderjs)
-# Installation
-```js
-bun install vaderjs @latest
-```
-```ts
-import { useSate, e } from "vaderjs"
-export default function(){
-  let [count, setCount] = useState(0)
-  return (
-    <div>
-     <p>Count is {count} </p>
-     <button onClick={()=>setCount(count++)}>
-      Increment +1
-      </button>
-    </div>
-  )
-}
-```
-# Project Setup
-Create a pages folder - which allows you to have nextjs page like routing via buns file based router
-Tip: Each folder can be deep nested up to 4 levels!
-```md
-/pages/index.jsx = /
-/pages/home/[page].jsx  = /home/:page
-/pages/path/index.jsx = /path/
-/pages/test/[[...catchall]]/index.jsx = /path/test/*
-/pages/route/[param1]/[param2].jsx = /path/route/:param1/:param2
-```
-Keyword folders - all files are passed from these folders to the build folder
-```md
-1. pages - used for jsx route files
-2. src  - used for your jsx components / javascript -typescript files
-3. public - used for anything / css / json etc
-```
-# Define your config
-```ts
-import { defineConfig } from "vaderjs/config";
-import cloudflare from "vaderjs/plugins/cloudflare/functions"
-import tailwindcss from "vaderjs/plugins/tailwindcss"
-export default defineConfig({
-    target: "web",
-    host: {
-        hostname: "localhost",
-        provider:'cloudflare' // used for ssg or ssr
-    },
-    env: {
-        PORT: 3000,
-        SSR: true,
-        apiRoute: "https://api.example.com"
-    },
-     Router: {
-        tls: {
-            cert: "cert.pem",
-            key: "key.pem"
-        },
-        headers: {
-            "cache-control": "public, max-age=0, must-revalidate"
-        }
-    },
-    plugins: [cloudflare, tailwindcss],
-});
-```

package/bun.lockb DELETED Viewed

Binary file

package/bundler/index.js DELETED Viewed

@@ -1,295 +0,0 @@
-import {
-  Component,
-  e,
-  useState,
-  useEffect,
-  useFetch,
-  useAsyncState,
-  Fragment,
-} from "vaderjs";
-import { document } from "vaderjs/document/index.ts";
-import fs from "fs";
-import ansiColors from "ansi-colors";
-import path from "path";
-let path2 = require("path");
-globalThis.Fragment = Fragment;
-globalThis.window = {
-  location: {
-    hash: "",
-    host: "",
-  },
-};
-globalThis.Component = Component;
-globalThis.e = e;
-globalThis.useFetch = useFetch;
-globalThis.useEffect = useEffect;
-globalThis.useAsyncState = useAsyncState;
-globalThis.useState = useState;
-globalThis.genKey = () => {
-  return crypto.randomUUID();
-};
-globalThis.document = {
-  createElement: (tag) => { },
-  getElementById: (id) => { },
-  querySelector: (query) => {
-    return Object.create({
-      addEventListener: (event, cb) => { },
-      removeEventListener: (event, cb) => { },
-      innerHTML: "",
-      appendChild: (child) => { },
-      removeChild: (child) => { },
-      src: "",
-      style: {},
-    });
-   },
-  querySelectorAll: (query) => {
-    return []
-  },
-};
-globalThis.window = {
-  addEventListener: (event, cb) => { },
-  removeEventListener: (event, cb) => { },
-  localStorage: {
-    setItem: (key, value) => { },
-    getItem: (key) => { },
-  },
-  sessionStorage: {
-    setItem: (key, value) => { },
-    getItem: (key) => { },
-  },
-  location: {
-    href: "",
-    pathname: "",
-  },
-}
-globalThis.localStorage = {
-  setItem: (key, value) => { },
-  getItem: (key) => { },
-}
-try {
-  await Bun.build({
-    entrypoints: [process.env.ENTRYPOINT],
-    minify: false,
-    root: process.cwd() + "/dist/",
-    outdir: process.cwd() + "/dist/",
-    format: "esm",
-    ...(JSON.parse(process.env.DEV) ? { sourcemap: "inline" } : {}),
-    packages: "bundle",
-    env: "inline",
-    external: ["vaderjs", "*.png", "*.jpg", "*.jpeg", "*.gif", "*.svg", "*.css"],
-  });
-} catch (error) {
-  console.error(error)
-}
-let builtCode = fs.readFileSync(path.join(process.cwd(), 'dist', process.env.filePath), 'utf-8')
-const handleReplacements = (code) => {
-  let lines = code.split('\n')
-  let newLines = []
-  for (let line of lines) {
-    let hasImport = line.includes('import')
-    if (hasImport && line.includes('vaderjs')) {
-      line = line.replace('vaderjs', '/src/vader/index.js')
-    }
-    if (hasImport && line.includes('react')) {
-      line = line.replace('react', '/src/vader/index.js')
-    }
-    if(hasImport && line.includes('public') && line.includes('.png') ||
-     line.includes('.jpg') || line.includes('.jpeg') || line.includes('.gif') || line.includes('.svg')) {
-       let url = line.split('"')[1]
-       // replace ../../
-        var b4 = url
-        let filevariable = line.split("import")[1].split("from")[0].replace(" ", "").replace("{", "").replace("}","")
-        url =   url.replace('../../', '').replace('../', '').replace('./', '')
-        line = `var ${filevariable} = "${url}"`
-        console.log(line)
-    }
-    if (hasImport && line.includes('.css')) {
-      try {
-        let isSmallColon = line.includes("'")
-        let url = isSmallColon ? line.split("'")[1] : line.split('"')[1]
-        // start from "/" not "/app"
-        // remvoe all ./ and ../
-        url = url.replaceAll('./', '/').replaceAll('../', '/')
-        let p = path.join(process.cwd(), '/', url)
-        line = '';
-        url = url.replace(process.cwd() + '/app', '')
-        url = url.replace(/\\/g, '/')
-        if (!bindes.includes(`<link rel="stylesheet" href="${url}">`)) {
-          bindes.push(`
-                  <style>
-                    ${fs.readFileSync(p, 'utf-8')}
-                  </style>
-                  `)
-        }
-      } catch (error) {
-        console.error(error)
-      }
-    }
-    if (line.toLowerCase().includes('genkey()')) {
-      line = line.toLowerCase().replace('genkey()', `this.key = "${crypto.randomUUID()}"`)
-    }
-    if (!hasImport && line.includes('useFetch')) {
-      line = line.replace('useFetch', 'this.useFetch')
-    }
-    if (!hasImport && line.match(/\buseState\d*\(/) && line.includes('[') && !line.includes("this")) {
-      let key = line.split(',')[0].split('[')[1].replace(' ', '');
-      let updatedLine = line.replace(/\buseState\d*\(/, `this.useState('${key}',`);
-      line = updatedLine;
-    }
-    if (!hasImport && line.match(/\buseAsyncState\d*\(/) && line.includes('[') && !line.includes("this")) {
-      let key = line.split(',')[0].split('[')[1].replace(' ', '');
-      let updatedLine = line.replace(/\buseAsyncState\d*\(/, `this.useAsyncState('${key}',`);
-      line = updatedLine;
-    }
-    if (!hasImport && line.match(/\buseEffect\d*\(/) && !line.includes("this")) {
-      let updatedLine = line.replace(/\buseEffect\d*\(/, `this.useEffect(`);
-      line = updatedLine;
-    }
-    if (!hasImport && line.match(/\buseRef\d*\(/) && line.includes('[') && !line.includes("this")) {
-      line = line.replace(' ', '')
-      let b4 = line
-      let key = line.split('=')[0].split(' ').filter(Boolean)[1]
-      console.log(key)
-      b4 = line.replace('useRef(', `this.useRef('${key}',`)
-      line = b4
-    }
-    newLines.push(line)
-  }
-  let c = newLines.join('\n')
-  return c
-}
-builtCode = handleReplacements(builtCode)
-builtCode += `
-var process = {
-  env: {
-    ${Object.keys(process.env)
-      .filter((key) =>
-        !['bindes', 'ENTRYPOINT', 'ROOT', 'OUT', 'file', 'DEV',
-          'size', 'filePath', 'isAppFile', 'isJsx', 'INPUT'].includes(key)
-      )
-      .map((key) => `${key}: "${process.env[key]}"`)
-      .join(',\n')}
-  }
-}
-`;
-fs.writeFileSync(path.join(process.cwd(), 'dist', process.env.filePath), builtCode)
-let isClass = function (element) {
-  return element && element.toString().startsWith("class");
-};
-const generatePage = async (
-  data = { path: process.env.INPUT, route: process.env.OUT }
-) => {
-  const { path, route } = data;
-  if (path.includes("root.js")) return;
-  let html = await import(path).then((m) => m.default);
-  let { head } = await import(path).then((m) => m);
-  let isFunction = false;
-  globalThis.isServer = true;
-  if (!html) {
-    return
-  }
-  if (isClass(html)) {
-    html = new html();
-    html.Mounted = true;
-    html = html.render();
-  } else {
-    isFunction = true;
-    let instance = new Component();
-    html = html.bind(instance);
-    instance.render = html;
-    html = instance.render();
-  }
-  let h = document(html);
-  if(process.env.bindes.includes('<link rel="stylesheet" ')){
-    // turn stylesheet into inline style
-    let links = process.env.bindes.split('<link rel="stylesheet" ')
-    let styles = []
-    for(let link of links){
-      if(link.includes('href')){
-        let href = link.split('href=')[1].split('>')[0].replace('"', '').replace('"', '')
-        let file = fs.readFileSync(path2.join(process.cwd() + "/dist/", href), 'utf-8')
-        styles.push(file)
-      }
-    }
-    let style = styles.join('\n')
-    process.env.bindes = `
-    <style>
-      ${style}
-    </style>
-    `
-  }
-  if (!fs.existsSync(process.cwd() + "/dist" + path2.dirname(route))) {
-    fs.mkdirSync(process.cwd() + "/dist" + path2.dirname(route), {
-      recursive: true,
-    });
-  }
-  let headHtml = "";
-  if (head) {
-    headHtml = document(head());
-  }
-  await Bun.write(
-    process.cwd() + "/dist/" + route + "/index.html",
-    `<!DOCTYPE html>
-     <head>
-      <script  defer type="module">
-        import c from '${process.env.filePath}'
-        import {render, e} from '/src/vader/index.js'
-        window.e = e
-        render(c, document.body)
-      </script>
-       ${process.env.bindes}
-      </head>
-      ${h}
-            `
-  );
-  console.log(
-    ansiColors.blue(
-      `${process.env.filePath.replace(".js", ".jsx")} - ${parseInt(
-        process.env.size
-      ).toFixed(2)}kb`
-    )
-  );
-  process.exit(0);
-};
-try {
-  if (process.env.isJsx == "true" && process.env.isAppFile == "true") {
-    generatePage({ path: process.env.INPUT, route: process.env.OUT })
-  }
-} catch (error) {
-  console.log(ansiColors.red(error))
-}

package/document/index.ts DELETED Viewed

@@ -1,77 +0,0 @@
-//@ts-nocheck
-const acceptedAttributes = [
-   // Global attributes
-   'accesskey', 'class', 'className', 'idKey', 'contenteditable', 'contextmenu', 'data', 'dir', 'hidden',
-   'id', 'lang', 'style', 'tabindex', 'title', 'translate', 'xml:lang', 'xml:space',
-   // SVG-specific attributes
-   'xmlns', 'fill', 'viewBox', 'stroke-width', 'stroke', 'd', 'stroke-linecap', 'stroke-linejoin', 'content', 'name'
- ];
-export const document = (element: any) => {
-   if(!element) return ``
-   let type = element.type;
-   let el =  type ===  null ? `` : `<${type}`
-   let attributes = element.props;
-   let children = element.children;
-     if(type != null && type !== false && type !== true && type !== undefined){
-      for (let key in attributes) {
-         if (typeof attributes[key] !== "string" || !acceptedAttributes.includes(key)) {
-            continue;
-          }
-          if(key === "key"){
-            el += ` key="${attributes[key]}"`;
-            continue;
-         }
-         if (key === "className") {
-            el += ` class="${attributes[key]}"`;
-            continue;
-         }
-         if (key === "style") {
-            // convert style object to string
-            let styles = attributes[key];
-            let styleString = "";
-           // convert camelCase to kebab-case
-            for (let style in styles) {
-               let kebabStyle = style.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-               styleString += `${kebabStyle}:${styles[style]};`;
-            }
-            el += ` style="${styleString}"`;
-            continue;
-         }
-         //@ts-ignore
-         if (key.startsWith("on")){
-            continue;
-         }
-         el += ` ${key}="${attributes[key]}"`;
-       }
-     }
-    el += type === null || type == false ? `` : `>`
-    if(children === null || children === undefined){
-      return el;
-    }
-    for (let i = 0;i < children.length; i++) {
-      let child = children[i];
-      if (Array.isArray(child)) {
-         child.forEach((c) => {
-            el += document(c);
-         });
-      }
-      if(typeof child === "function"){
-         let out =  document(child());
-         if(out !== null || out !== false || out !== undefined){
-            el += out;
-         }
-      }else
-      if (typeof child === "object") {
-         el += document(child);
-      }else{
-         if(child === null || child === false || child === undefined){
-            continue;
-         }
-         el += child;
-      }
-    }
-    el += type ===  null ? `` : `</${type}>`
-    return el;
-}

package/examples/counter/index.jsx DELETED Viewed

@@ -1,10 +0,0 @@
-import { useState } from "vaderjs";
-export default function App() {
-    let [count, setCount] = useState(0);
-    return (
-        <div>
-            <h1>{count}</h1>
-            <button onClick={() => setCount(count + 1)}>Increment</button>
-        </div>
-    );
-}