v0.3.0 #5

ije · 2020-10-26T10:24:05Z

Here's the roadmap for v0.3.0 updates.

Features

New JSX transform

~~with new jsx transform, now we can use jsx without importing React.~~

We have decided to postpone this feature until later. See #94 for details.

JSX magic

The new compiler will transpile the JSX intelligently, with this you don't need to import specific components, like Head, Link, etc. Just use the native JSX elements instead:

export default function App() {
  return (
    <>
      {/* head for ssr */}
      <head>
        <title>Hello World</title>
      </head>

      {/* import css */}
      <link rel="stylesheet" href="../styles/app.css" />

      {/* redirct pages */}
      <a href="/about">About</a>

      {/* nav link */}
      <a
        rel="nav"
        href="/about"
        data-active-className="active"
        data-active-style={{ color: 'purple' }}
      >About</a>

      {/* prefetch pages */}
      <a rel="prefetch" href="/about">About</a>

      {/* custom scripts */}
      <script src="https://cdn.google.com/ga.js"></script>
      <script>{`
        function gtag() {
          dataLayer.push(arguments)
         }
         window.dataLayer = window.dataLayer || [];
         gtag("js", new Date());
         gtag("config", "G-1234567890");
      `}</script>
    </>
  )
}

Inline CSS

Add inline CSS by style tag with SSR support:

const color = '#d63369'

export default function App() {
  return (
    <>
      <h1>Hello World</h1>
      <style>{`
        h1 {
          color: ${color};
        }
      `}</style>
    </>
  )
}

New Compiler & Bundler (#28)

Plugins

builtin css-loader with postcss processor
~~sass-loader (improved by @shadowtime2000 (SASS Support for SASS Plugin #41))~~
~~wasm-loader~~
markdown-loader

APIs

support middlewares
~~decodeBody~~ readBody (feat: add new method on Request class #35) thanks @shinspiegel

Server

support custom server
path rewrites
https(tls)
gzip/br encoding

Improvements

simplify cli output
init command UI (Simple Init UI #47)
ErrorBoundary UI

Optimization

modulepreload (Preload All Scripts #9) @shadowtime2000
cache remote deps
~~compilation symlink mode~~

Deployment platform support

Vercel
- build
- APIs(functions)

The text was updated successfully, but these errors were encountered:

lucacasonato · 2020-10-26T17:11:43Z

use https://alephjs.org/mod.ts import URL

Are the urls not going to be versioned?

ije · 2020-10-26T18:17:15Z

@lucacasonato https://alephjs.org/mod.ts may map to the cli version during the compilation, it's a vague idea

lucacasonato · 2020-10-26T19:13:58Z

Interesting. I would be careful about magic resolving like that though. It will break all kinds of tooling (deno info, deno cache, deno vscode extension).

mohsenkhanpour · 2020-11-08T14:10:59Z

Aleph.js looks very promising. I have some suggestions:

Designing a plugin API so the community can also contribute to ecosystem.
Using a monorepo, so the code related to core and plugins, and examples are separated.
Use a folder named static for holding static files and build output to public rather than output. This is usually the convention and hosting services have defaults for this folder.
Regarding: support custom server(oak?) -> You can see Sapper for implementation references.
Create a Discord server for communication.

ije · 2020-11-08T14:22:35Z

@mohsenkhanpour thanks for your kind suggestions!

Aleph.js already has a plugin system, pleas check plugins and example.
Aleph.js works in Deno, monorepo is just Url prefix, will do in the future on-demand.
this repository is a library, directory public and dist(SSG output) will be applied in your application.
i like Sapper too.
will consider, any suggestion?

mohsenkhanpour · 2020-11-08T14:53:38Z

@ije

Yes, I checked plugins and examples. What I meant was like a more elaborate API, for example Gatsbyjs provides some hooks to Gatsby lifecycle like onPreBuild,onPostBuild ...
also as I see now plugins don't accept options.
For example config for plugin could be:

// For default options:
plugins: [`aleph-plugin-sass`] 
// For customized option:
plugins: [
  {
    resolve: `aleph-plugin-sass`,
    options: {
      postCssPlugins: [somePostCssPlugin()],
      precision: 6,
    },
  },
]

also having a naming convention for plugins would be very helpful, Gatsby uses like
gatsby-plugin-* : For general plugins like sass, less, analytics, CSP, manifest.
gatsby-transformer-* : For transformers plugins like image optimization, markdown transformation.
gatsby-source-* : For sourcing data during build. Using these plugins you can source data from many source: markdown, yaml, wordpress, ....
gatsby-theme-*: These are themes that come with preconfigured options.

Having these kinds of convention can give meaningful purpose to plugin system and lead to a rich ecosystem.

2.Yes. What I meant was like less tangled folder structure. This is not necessary now as you said, however as the number of examples and plugins increase it could be a wise idea.

3.I wasn't talking about this repository, I was talking about the application. In the docs it says put your static files in public folder, and build command outputs a output folder.
Using public folder to hold static assets may cause hosting automation to think it should serve public folder, whereas it should serve output folder.
Using static folder for static assets, and building to public is more conventional.

5.Just create a server, and put the link on the website/repo Readme.md , and please invite us.

mohsenkhanpour · 2020-11-08T15:04:33Z

@ije
Also supporting CSS modules:

// For global CSS
import ".\style.css"

and

// For CSS modules
import styles from ".\style.module.css"

CRA, Next.js, and Gatbsyjs all support this out of the box.

ije · 2020-11-08T15:22:18Z

@mohsenkhanpour

the plugin system is vary simple, currently only support module import resolve and transform code, since we don't use webpack/rollup/babel. (api)
oh sorry! i think static should be a sub-folder of the public folder, Aleph.js server will serve the public dir as root directly. All files in public folder will be copied to output dir by SSG
for example, you want put some javascript or css, even wasm files in your application public and you have some images:
- /public/static/images/logo.png -> /static/images/logo.png
- /public/styles/global.css -> /styles/global.css
- /public/scritps/42.wasm -> /scritps/42.wasm
- /public/ga.js -> /ga.js
- /public/favicon.icon -> /favicon.icon

ije · 2020-11-08T15:23:31Z

@mohsenkhanpour CSS modules will be supported directly in the future.

shinspiegel · 2020-12-05T20:53:10Z

What is needed for the API functions to be available in the Vercel?

shadowtime2000 · 2020-12-05T20:56:53Z

@shinspiegel If you take a look at the serverless functions Vercel docs it seems like only NodeJS is supported for serverless functions. Once Deno is supported, it should be able to work fine, though it may need some communication with the team on serverless functions for Vercel.

ije · 2020-12-05T23:08:33Z

@shinspiegel @shadowtime2000 this https://github.com/TooTallNate/vercel-deno can help, we should fork it to support aleph's routing

mohsenkhanpour · 2020-12-06T08:32:39Z

I have tried serverless with Deno, Vercel definitely supports it. Vercel also supports Python, Ruby and Go.
Netlify Functions currently support JavaScript (with the option to bundle npm dependencies from package.json) and Go.
@ije @shadowtime2000 @shinspiegel
As far as I know serverless functions are not dependent on the client side library. You send a request and you receive a response.
Routing is often handled by client side routing libraries. I would say tying routing to serverless functions, and making it a requirement to use Vercel Deno for routing is an extremely fragile architecture.
Why do you say it should be forked to support Aleph's routing?

ije · 2020-12-06T08:48:18Z

@masataka The APIRequest of Aleph is not a standard ServerRequest of std which vercel-deno is using, we need to inject router info base on api file path and support dynamic api routes:

// /api/hello/[name].ts

import type { APIRequest } from "https://deno.land/x/aleph/types.ts"

export default function handler(req: APIRequest) {
  req.status(200).json({ name: 'Hello ' + req.params.name })
}

This can not work in Vercel with vercel-deno.

mohsenkhanpour · 2020-12-06T09:37:35Z

@ije I see. I confused it with client side routes, however you are refereeing to API routes.
It's like server routes of Sapper, and Dynamic api routes of Next.js.
So these API dynamic routes will also work for dev server, and production server (for example if you want to self host, Aleph).

I suppose Netlify doesn't support such feature. Have you done any research?

mohsenkhanpour · 2020-12-06T09:50:28Z

@shinspiegel @shadowtime2000 this https://github.com/TooTallNate/vercel-deno can help, we should fork it to support aleph's routing

Forking it would be a great idea. I suppose people who use other frameworks could also benefit from using Deno on the serverless side.

@ije BTW have you thought of how to implement custom server (oak)? I see it is in the check list, but there isn't much discussion about it.

How does Sapper's custom server and custom API routing work?

This is the custom server of default Sapper template:
https://github.com/sveltejs/sapper-template/blob/master/src/server.js

To make it work with Vercel's dynamic routing they just default export the custom server instance.
https://github.com/thgh/vercel-sapper

It's a bit confusing. Is Vercel able to run custom server instance?

shadowtime2000 · 2020-12-23T05:37:02Z

@mohsenkhanpour

It's a bit confusing. Is Vercel able to run custom server instance?

I don't believe so, Vercel runs on AWS Lambda and is purely serverless hence the cheaper pricings with frameworks like NextJS and BlitzJS (and soon AlephJS) with stuff like API routes

mohsenkhanpour · 2020-12-23T06:59:48Z

@shadowtime2000 It might be that https://github.com/thgh/vercel-sapper converts the custom server to serverless friendly code.

How do you think Aleph can implement custom server (eg. oak) in a serverless compatible way?

shadowtime2000 · 2020-12-23T07:02:33Z

@mohsenkhanpour That is probably what is going on, NextJS says you can't get the advantages of a serverless architecture when using a custom server implementation, I think it is best to go with that for now... we can probably implement conversion or something in v0.4.

shadowtime2000 · 2021-01-10T22:34:36Z

We could look into using an adapter system kind of like SvelteKit where you plug an adapter into the aleph.config.(ts|js). It could be possible to have Vercel support with the File System API though that sadly only supports Node. We could also just do it without the file system API. This requires some further research

shadowtime2000 · 2021-01-22T05:22:14Z

It seems like with the new project restructure the only thing we need JSDoc in now is redirect. I guess JSDoc for internal code would be pretty cool because it makes it easier for potential contributors to understand the codebase.

EDIT: actually i think there are a couple other functions we need JSDoc for tho too

ije · 2021-01-22T06:23:19Z

@shadowtime2000 good to hear that! writing JSDoc is always hard for me...

ije · 2021-01-29T13:46:03Z

@mohsenkhanpour @shadowtime2000 Custom server is ready in the latest branch.

with deno std http server:

import { serve } from "https://deno.land/std/http/server.ts"
import { Application, Server } from "https://deno.land/x/aleph/server/mod.ts"

const app = new Appliaction() 
const server = new Server(app)
const s = serve({ port: 8080 })

for await (const r of s) {
  server.handle(r)
}

with oak:

import { Application as Oak } from "https://deno.land/x/oak/mod.ts";
import { Application, Server } from "https://deno.land/x/aleph/server/mod.ts"

const oak = new Oak()
const app = new Appliaction() 
const server = new Server(app)

oak.use((ctx) => {
  server.handle(ctx.request)
})

await oak.listen({ port: 8080 })

mohsenkhanpour · 2021-01-29T14:33:37Z

Great work.
I will update the website and write docs for it.
What is the default path for custom server?

thegaryroberts · 2021-02-06T01:07:41Z

Server choice of std vs oak might be an option that could be picked from when the Init UI (#47) is in place. Could skip the need for documentation.

shadowtime2000 · 2021-02-07T00:12:37Z

Server choice of std vs oak might be an option that could be picked from when the Init UI (#47) is in place. Could skip the need for documentation.

I don't think this is the best way to do this - a custom server is a more "advanced" configuration so users should be able to implement it on their own.

Hunam6 · 2021-03-28T02:08:26Z

I disagree, oak is the Deno module (not NodeJS too, only Deno) with the most stars listed on deno.land. It means that many people use it, this choice should be available.

shadowtime2000 · 2021-03-28T03:25:20Z

@Hunam6 I don't think popularity should be the deciding factor. Just because many people use it shouldn't really mean that the choice should be available. Going for a custom server architecture instead of a basic serverless like option is something that should only done once you have a full grasp because if you mess up the entire app goes down. I think it is a good idea to instead kind of "force" people to read the docs on it so they can understand.

getspooky · 2021-04-13T17:50:56Z

@ije I think we need to add more details to Contributing.md on how to start and test application

hazae41 · 2021-05-06T11:53:18Z

What's the current state of Vercel API functions? I can help

Maybe we can fork vercel-deno? https://github.com/TooTallNate/vercel-deno

Lite5h4dow · 2021-08-21T09:10:53Z

this probably isnt the best place to put this but could anyone give me some pointers on making a plugin for Aleph?

ije · 2021-08-22T19:31:42Z

@Lite5h4dow the docs updating will land later includes the plugin writing guid!

Lite5h4dow · 2021-08-22T19:32:31Z

Thankyou 😊

ije · 2021-08-23T19:27:03Z

@Lite5h4dow https://alephjs.org/docs/api-reference/plugin-api it is

ije · 2021-08-28T06:34:30Z

What's the current state of Vercel API functions? I can help

Maybe we can fork vercel-deno? https://github.com/TooTallNate/vercel-deno

i implemented this forked from @lucacasonato prior works at https://github.com/alephjs/vercel-aleph

josh-hemphill · 2021-10-30T22:15:06Z

Is Vue/pluggable-frameworks still a v0.4.0 goal? There's no specific issue for it that I can find, so there's nothing listed under milestones about it either, just passing mentions.

ije pinned this issue Oct 26, 2020

ije added use feedback wanted and removed user feedback wanted labels Oct 26, 2020

ije added the ☼ user feedback wanted Wait for user feedback label Oct 26, 2020

ije mentioned this issue Nov 3, 2020

Add Preload Link Tags To Head #7

Closed

shadowtime2000 mentioned this issue Nov 10, 2020

Cannot resolve module 'head' error when importing Tailwind #25

Closed

ije mentioned this issue Nov 15, 2020

Please considering rename aleph.js #17

Closed

ije added this to the v0.3.0 milestone Nov 15, 2020

This was referenced Nov 15, 2020

Compile Error on Page with Stack #32

Open

Necessity of VSCode-specific files #46

Closed

ije linked a pull request Nov 20, 2020 that will close this issue

New Compiler&Bundler #28

Merged

15 tasks

mojtabakaviani mentioned this issue Dec 1, 2020

Support for Tailwind CSS #42

Open

ije closed this as completed in #28 Jan 22, 2021

ije reopened this Jan 22, 2021

KotlinIsland mentioned this issue Mar 24, 2021

How to enable oak? #202

Closed

hazae41 mentioned this issue May 21, 2021

🔍 SSG/SSR software feature comparison #49

Closed

ije unpinned this issue Mar 1, 2022

v0.3.0 #5

v0.3.0 #5

Comments

ije commented Oct 26, 2020 • edited

Features

New JSX transform

JSX magic

Inline CSS

New Compiler & Bundler (#28)

Plugins

APIs

Server

Improvements

Optimization

Deployment platform support

lucacasonato commented Oct 26, 2020

ije commented Oct 26, 2020

lucacasonato commented Oct 26, 2020

mohsenkhanpour commented Nov 8, 2020

ije commented Nov 8, 2020 • edited

mohsenkhanpour commented Nov 8, 2020 • edited

mohsenkhanpour commented Nov 8, 2020 • edited

ije commented Nov 8, 2020 • edited

ije commented Nov 8, 2020

shinspiegel commented Dec 5, 2020

shadowtime2000 commented Dec 5, 2020

ije commented Dec 5, 2020

mohsenkhanpour commented Dec 6, 2020 • edited

ije commented Dec 6, 2020

mohsenkhanpour commented Dec 6, 2020 • edited

mohsenkhanpour commented Dec 6, 2020

shadowtime2000 commented Dec 23, 2020

mohsenkhanpour commented Dec 23, 2020

shadowtime2000 commented Dec 23, 2020

shadowtime2000 commented Jan 10, 2021

shadowtime2000 commented Jan 22, 2021 • edited

ije commented Jan 22, 2021

ije commented Jan 29, 2021 • edited

mohsenkhanpour commented Jan 29, 2021

thegaryroberts commented Feb 6, 2021

shadowtime2000 commented Feb 7, 2021

Hunam6 commented Mar 28, 2021

shadowtime2000 commented Mar 28, 2021

getspooky commented Apr 13, 2021 • edited

hazae41 commented May 6, 2021 • edited

Lite5h4dow commented Aug 21, 2021

ije commented Aug 22, 2021

Lite5h4dow commented Aug 22, 2021

ije commented Aug 23, 2021

ije commented Aug 28, 2021

josh-hemphill commented Oct 30, 2021

ije commented Oct 26, 2020 •

edited

ije commented Nov 8, 2020 •

edited

mohsenkhanpour commented Nov 8, 2020 •

edited

mohsenkhanpour commented Nov 8, 2020 •

edited

ije commented Nov 8, 2020 •

edited

mohsenkhanpour commented Dec 6, 2020 •

edited

mohsenkhanpour commented Dec 6, 2020 •

edited

shadowtime2000 commented Jan 22, 2021 •

edited

ije commented Jan 29, 2021 •

edited

getspooky commented Apr 13, 2021 •

edited

hazae41 commented May 6, 2021 •

edited