Aleph.js Versions Save

🚀🚀🚀 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

🎉🎉🎉 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

🎉 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)

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: [ ... ],
    },
  }, 
});

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!

• 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...

• 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

• 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

• 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

• 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