aleph.js

Bot releases are hidden (Show)

aleph.js - Latest Release

Published by ije over 2 years ago

🚀🚀🚀 A fresh Yew SSR application in Rust example added, both the CSR And SSR are using WebAssembly with great performance in modern browsers and serverless platform at edge.

Preview: https://aleph-yew.deno.dev/
Source Code: https://github.com/alephjs/aleph.js/tree/main/examples/yew-app

Other Changes

BREAKING move unocss config in build section
feat: added eager property for middleware (eager middleware allow you to handle the static file/code transpile requests)
feat(framework/vue): support _app.vue and _404.vue #466
feat(HMR): updated client routes by HMR #472
refactor: rewrote applyUnoCSS function
fix: avoid setting userAgent when it's already set #473
fix: propagate SIGINT to child process #474

❤️ Huge thanks to @linbingquan @pipiduck @kt3k

aleph.js -

Published by ije over 2 years ago

🎉🎉🎉 We just experimental provided Vue.js framework support with FS routing and data fetching!!!

Preview: https://aleph-vue.deno.dev/
Source Code: https://github.com/alephjs/aleph.js/tree/main/examples/vue-app

❤️ Huge thanks to @linbingquan

Other Changes

Added typings for route Data, and now you don't need to return Response object in date getter/actions. return new Response(JSON.string({}), { headers: [["content-type": "application/json"]] }) is so painful, we like web standards, but sometimes it is so formalism.

https://user-images.githubusercontent.com/2883484/167751094-77a61ca2-34e4-48a8-9931-bab19259732c.mov

Added server error handling api

serve({
  ...
  onError: (error, cause) => {
    if (cause.by === "ssr" && error instanceof ApiErrorn && error.code === "NotFound") {
      return Response.redirect("/", 302);
    }
  },
});

Improved the error UI
Improved HTTP cache (add Cache-Control or Etag header for requests automatically)
Refactored UnoCSS work mode and style loader (build 10x faster when ssr and use CSSStyleSheet to manage module CSS rules)
Moved compiler to https://github.com/alephjs/aleph-compiler to make this repo test faster
And some other bugfixs/performance improvement/dependencies upgrade

aleph.js -

Published by ije over 2 years ago

🎉 We implemented the ESM bundling for `build` mode

👎 1.0.0-alpha.27: https://aleph-hello-zay950jqmpy0.deno.dev/ (25 JS files loaded in 65.6kb without polyfill)
👍 1.0.0-alpha.28: https://aleph-hello.deno.dev/ (5 JS files loaded in 57.2kb with compat polyfill)

aleph.js -

Published by ije over 2 years ago

breaking change: renamed atomicCSS to unocss of server config, we are looking for supporting aleph.js server config in unocss official vscode extension: https://github.com/unocss/unocss/pull/903

serve({
  config: {
    unocss: {
      presets: [ ... ],
    },
  }, 
});

aleph.js -

Published by ije over 2 years ago

Hi, long time! We finally got some progress on the new architecture rewrite! Please have a look at the demo apps deployed to Deno Deploy with the new architecture (1.0.0-alpha.20):

React Hello-world: https://aleph-hello.deno.dev/
Vue Hello-world: https://aleph-vue.deno.dev/
React 18 Suspense SSR: https://aleph-suspense-ssr.deno.dev/
UnoCSS(tailwind): https://aleph-unocss.deno.dev/
Monaco Editor: https://aleph-monaco-editor.deno.dev/

You can find the source code here: https://github.com/alephjs/aleph.js/tree/main/examples

Currently, we are working on the new architecture docs https://github.com/alephjs/alephjs.org/pull/58, will publish a draft very soon, see you then!

aleph.js -

Published by ije over 2 years ago

Deno Deploy first

better data fetching:

import { useData } from "aleph/react";
import "../style/index.css";

let count = 0;

export const data = {
  get: (req: Request) => {
    return new Response(JSON.stringify({ count }));
  },
  post: async (req: Request) => {
    const { action } = await req.json();
    if (action === "increase") {
      count++;
    } else if (action === "decrease") {
      count--;
    }
    return new Response(JSON.stringify({ count }));
  },
};

export default function Index() {
  const { data, isLoading, isMutating, mutation } = useData<{ count: number }>();
  return (
     <div className="counter">
      <span>Counter:</span>
      {isLoading && <em>...</em>}
      {!isLoading && <strong>{data?.count}</strong>}
      <button
        disabled={Boolean(isMutating)}
        onClick={() => mutation.post({ action: "decrease" }, "replace")}
      >-</button>
      <button
        disabled={Boolean(isMutating)}
        onClick={() => mutation.post({ action: "increase" }, "replace")}
      >+</button>
    </div>
  );
}

highly customizable server:

// server.tsx
import { renderToString } from "react-dom/server";
import { Router } from "aleph/react";
import { serve } from "aleph/server";

serve({
  config: {
    routeFiles: "./routes/**/*.tsx",
    atomicCSS: {
      presets: [presetWindi()]
    }
  },
  middlewares: [
    new Session({ cookieName: "session" }),
    new GithubAuth({ accessToken: "xxx" })
  ],
  fetch: (req, ctx) => {
    ctx.session.get("username");
  },
  ssr: (ctx) => {
    return renderToString(<Router ssrContext={ctx} />);
  },
});

use index.html as the client entry
transpile jsx/ts/ts for browsers on-demand
hmr (built-in react fast refresh)
use parcel css
builtin atomic CSS (unocss)
support any UI libarary and ssr
file system routing
html rewriter
and more...

aleph.js -

Published by ije about 3 years ago

Add deno.json after init command with types that works in Deno and the browser (fix #405)

{
  "compilerOptions": {
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "dom.asynciterable",
      "deno.ns",
      "deno.unstable"
    ]
  }
}

Use fastTransform in prod mode (fix https://github.com/alephjs/esm.sh/issues/181)
Fix exit code of build subprocess
Don't render '/favicon.ico'
Upgrade swc deps
Upgrade esbuild to 0.13.2

aleph.js -

Published by ije about 3 years ago

Allow useDeno and ssr.props to access Request (close #22, #364, #401)

export default function Page() {
  const isLogined = useDeno(req => {
    return req.headers.get('Auth') === 'XXX'
  }, { revalidate: true })

  return (
    <p>isLogined: {isLogined}</p>
  )
}

with ssr.props options:

export const ssr: SSROptions = {
  props: req => {
    return {
       $revalidate: true,
       username: req.params.username,
       logined: req.headers.get('Auth') === 'XXX'
    }
  }
}

Add code highlight for the markdown plugin (optional)

export default <Config> {
  plugins: [
    markdown({
      highlight: {
        provider: 'highlight.js',
        theme: 'github'
      }
    }),
  ]
}

Update css.cache config to true by default
More useful Error in import onerror (#403) @TjeuKayim
Add Props generic to SSROptions (#402) @tatemz

aleph.js -

Published by ije about 3 years ago

Improve module rebuild strategy when the config/plugins/import maps updated
Fix import remote CSS on production build (#388)
Fix esbuild resolver doesn't support file://path/mod.ts?foo=bar#tag
Fix the lang attribute of the <html> tag generated by SSG (#399) @calmery
Fix i18n routing (#397) @calmery
Add i18n and remote css examples

Credits

Huge thanks to @calmery

aleph.js -

Published by ije about 3 years ago

Add json-loader offical plugin
Fix SSR data passing (#383) @Nkzn
Fix invalid jsFile on windows (#389)
Await renderListener callback (#393) @TjeuKayim
Fix existsFile usage (#394) @getspooky
Migrate from denolib/setup-deno to denoland/setup-deno (#387) @uki00a
Upgrade esbuild to 0.12.28
Upgrade swc deps

aleph.js -

Published by ije about 3 years ago

Add a fastTransform function using esbuild to transpile remote non-jsx modules instead of swc
Improve framework setup perfermance (2x faster)
Add --no-check flag in install script
Fix css @import is not working
Upgrade esbuild to 0.12.25
Upgrade swc deps

aleph.js -

Published by ije about 3 years ago

Add a resolveImport method for Plugin System
Fix bundler error with virtual modules

aleph.js -

Published by ije about 3 years ago

Improve the Plugin System to support aleph_plugin_windicss HMR
Add tailwindcss example using windicss plugin above
Update the server Cache-Control to public, max-age=0, must-revalidate
Fix JSX Magic HMR missing deps

aleph.js -

Published by ije about 3 years ago

Fix aleph_pkg_uri resolve to avoid SSG error/missing-data when Aleph.js' version is different between import maps and cli.

aleph.js -

Published by ije about 3 years ago

Upgrade vercel-aleph version to 0.7.0

aleph.js -

Published by ije about 3 years ago

Support Vercel Functions
- Runtime: https://github.com/alephjs/vercel-aleph
- Optional to create vercel.json in init command
Remove postcss types check to get better ci speed
Fix upgrade command
Fix useDeno rendering unstable
Upgrade swc deps
Upgrade esbuild to 0.12.24
Upgrade std to 0.106.0

aleph.js -

Published by ije about 3 years ago

Fix init command

aleph.js -

Published by ije about 3 years ago

Rename plugin API onSSR -> onRender that allows you to change the HTML even in SPA mode · breaking
Fix cache NOT update in production mode
Improve ssr data fetching
Improve init command (#343)

Credits

Huge thanks to @getspooky

aleph.js -

Published by ije about 3 years ago

Rewrite Plugin system
Use Deno native http instead of std http
Support API middleware
Strip SSR code in browser

Add ssr options for pages

import type { SSROptions, Router } = 'aleph/types.ts'

export const ssr: SSROptions = {
  props: async (router: Router) => ({ ... }),
  paths: async () => [ ... ], // static paths for dynamic route
}

export default function Index(ssrProps) {
  return (
    <div>ssr props: {ssrProps}</div>
  )
}

CSS Modules Magic

import React from "https://esm.sh/react";

export default function App() {
  return (
    <>
      <link rel="stylesheet"  href="../style/app.module.css" />
      <h1 className="$title $bold">Hi :)</h1>
      <p className="$intro">Welcome!</p>
    </>
  );
}