Some people (like me) would prefer to have the files bundled together instead of having import statements in the final build. It would be great if there was an option to use something like denopack or Deno.bundle.

same issue with #2 , need to replace the path separator \ with /

Rhum is a testing framework built on top of Deno.test created by the team behind the Drash REST API framework. This is only necessary when we have more tests, so I am marking it as future for now.

Refs:

1. Documentation site for Rhum
2. v2 issue for Rhum (drashland/rhum#75)

just import it will crash the whole page

Demo:

import ReactDOM from 'https://esm.sh/react-dom'

export default () => {
  console.log(ReactDOM)
  return <div>hello</div>
}

Update

Workaround: disable SSR

Hi,

There is a way to get a JSON from a request body?

If not, can I help to improve this project providing a function for this?
Maybe creating a new method in the Request class?

Thanks in advance!

A comparison of SSG/SSR frameworks, it can be useful to compare all features in one place.
Add any feature you think it is not added here, when the table is complete it can be used as a markdown file for reference on how to migrate from other frameworks to Aleph.js/Deno.

Hi everyone!
I'm a technical writer, and I'm contributing to a ghostwritten article about Aleph.js features. I can't tell you where it is because of company NDAs, but rest assured that it's positive and should make more people interested in the framework. Anyway, doing the article really piqued my interest, so I did a deep dive into your docs. I was wondering, since I've been writing software documentation for a long time, and this framework seems interesting -- may I help you out with the documentation? I'm always interested in helping out with some new projects if people are interested. I'm a former software developer myself, so I could do user docs or dev docs, whichever you need most. If you don't need help right now, that's perfectly fine; I could help out anytime.

how can i use import maps with aleph?

This is not a technical topic.

The name aleph matches Cult(アレフ) in Japan.
https://en.wikipedia.org/wiki/Aleph_(Japanese_cult)

Japanese people are a bit afraid to talk about it.
Concerns about the name have already erupted from the Japanese community.
https://twitter.com/search?q=aleph.js%20lang%3Aja&src=typed_query&f=live

Hi! This library is cool, thanks for your work! When I view the source code, I found I can provide some better alternatives to some TS transformers.

React Refresh TS transformer: react-refresh-typescript (PR to React)

react-refresh-typescript is provided in both ESM and CommonJS format. This package doesn't depend on any Node-JS specific functionalities. It's fully passed the test suit as the babel version does.

Import path rewrite: @magic-works/ttypescript-browser-like-import-transformer is a fully functional import path rewrite library for converting any imports to Web-ready imports. This library also considers the non-Node environment in mind when design. All IO (including import statements) are delegated to a node adaptor so if you need it, I can write a deno adaptor and it's available for deno.

Thanks!

Thanks for creating the Discord server, I saw the README.MD update with the link.

However the link you have used is for a channel inside the server, so if someone is not part of server and they click on it, they cannot see channel.

You should create an invite link and set expire date to never so you can use it as a permalink to invite members. In order to do so:

1. Click on "Create Invite" icon:
   

2. Click on "edit invite link":
   

3. Don't use limits and expiration date so you won't have to update the link again
   

4. Generate invite and update the link in README.MD:
   

It's something like: https://discord.gg/{inviteCode}

I discovered AlephJs and I really love it, it just works out of box like magic. I'm trying to add support for TailwindCSS but I have no I idea where to start.
The documentation here suggest to use PostCSS but I don't think there is a PostCSS plugin in Deno yet : https://tailwindcss.com/docs/installation

Edit :
I checked this pull request #41 and I think we can do something similar for PostCSS

Hey guy ! Been trying aleph since I really like the concept. However, I faced some issues while importing the default ant components. The thing threw the "Invalid Hook Call" error even though I hadn't defined any hooks.

You can check out pages/index.tsx in this repo https://github.com/akash-joshi/my-own-writing-app/tree/aleph-dev

Thanks for the help in advanced.

I saw the the v0.3.0 roadmap and it includes adding SSL/TLS support which is very important for production.
It will probably be not that hard to implement since Deno already has the serveTLS API to create https web servers.
However, instead of crowding the command line with more options, I think the some options like these should be used in the aleph.config.js

export default {
	"ssl": true | false // default is false
        "certFile": string // required if ssl == true
        "keyFile": string // required if ssl == true
}

Should I try to implement it?

I tried example for pages/about.tsx but it is not working, when I go to "localhost:8080/about" it redirect me to localhost:8080.
I copied the same code from example at https://alephjs.org/docs/basic-features/pages but nothing, in terminal also there is no errors.
In firefox in transfer column I get NS_BINDING ABORTED. In terminal: modify /pages/about.tsx

i getting this error when i'm trying run aleph start

trace:

aleph start
postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
INFO Download https://esm.sh/react • https://esm.sh/[email protected]?target=es2015
INFO Download https://cdn.esm.sh/v1/[email protected]/es2015/react.js 
INFO Download https://deno.land/x/aleph/mod.ts • https://deno.land/x/[email protected]/mod.ts
INFO Download https://deno.land\x\aleph\aleph.ts 
INFO Download https://deno.land\x\aleph\context.ts 
INFO Download https://deno.land\x\aleph\error.ts 
INFO Download https://deno.land\x\aleph\head.ts 
INFO Download https://deno.land\x\aleph\util.ts 
INFO Download https://deno.land\x\aleph\events.ts 
INFO Download https://deno.land\x\aleph\routing.ts 
INFO Download https://deno.land\x\aleph\hooks.ts 
INFO Download https://deno.land\x\aleph\import.ts 
INFO Download https://deno.land\x\aleph\link.ts 
INFO Download https://deno.land/x/aleph/bootstrap.ts • https://deno.land/x/[email protected]/bootstrap.ts
INFO Download https://esm.sh/react-dom • https://esm.sh/[email protected]?target=es2015
INFO Download https://cdn.esm.sh/v1/[email protected]/es2015/react-dom.js 
INFO Download https://deno.land/x/aleph/nomodule.ts • https://deno.land/x/[email protected]/nomodule.ts
INFO Download https://deno.land/x/aleph/tsc/tslib.js • https://deno.land/x/[email protected]/tsc/tslib.js
INFO Download https://deno.land/x/aleph/renderer.ts • https://deno.land/x/[email protected]/renderer.ts
INFO Download https://esm.sh/lodash/unescape?no-check • https://esm.sh/lodash/unescape?no-check&target=es2015
INFO Download https://cdn.esm.sh/v1/[email protected]/es2015/unescape.js 
INFO Download https://esm.sh/react-dom/server • https://esm.sh/[email protected]/server?target=es2015
INFO Download https://cdn.esm.sh/v1/[email protected]/es2015/server.js 
error: Uncaught TypeError: relative import path "..\..\..\esm.sh\lodash\[email protected]" not prefixed with / or ./ 
or ../ Imported from "file:///C:/Users/CINNCINATUS/Desktop/files/deno-projects/app/.aleph/production.es2015/-/deno.land/x/aleph/renderer.js"

to reproduce:

• aleph init app
• aleph start

Hello, I'm trying to modify the body background when the user clicks a button.

However, it seems I cannot use the document keyword nor the findDOMNode method.

Is there a way to dynamically change the body background?

I created a basic project with aleph init and the development server is basically not working. If I go to localhost:8080 I just get 404 page not found. This is the same case for the production server. The only thing that is working for me is aleph build which seems to be building properly.

When using the SASS syntax it throws a syntax error.

When importing an external script such as JQuery, the script tag is written in the part surrounded by the head tag, but at that time Aleph.js is overnormalized and the browser cannot interpret the HTML.

export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
    return (<>
        <Head>
            <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        </Head>
        <Page {...pageProps} />
    </>);
}

Aleph prints a script tag like this.

 <script src="https://code.jquery.com/jquery-3.1.1.min.js" ssr />

This seems correct, but it's actually HTML that the browser can't draw as intended. we need a below.

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

There is a workaround. I wrote a JavaScript comment into the script tag's body.

export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
    return (<>
        <Head>
            <script src="https://code.jquery.com/jquery-3.1.1.min.js">/* WRITE JS COMMENT HERE */</script>
        </Head>
        <Page {...pageProps} />
    </>);
}

Hi,

I'm currently trying to implement the usage of Material-UI.

Any component that I try to import and use throws me this error: TypeError: window.getComputedStyle is not a function.
I checked the place where this error in thrown, and even though window exists, the getComputedStyle isn't defined. Maybe something related to SSR but I also tried disabling SSR and gave a totally different error.

Material-UI does work with SSR though. I have worked with Next.js and you can see an example here: mui-org/material-ui/blob/master/examples/nextjs

Any suggestions of what I could try?

Steps to reproduce

1. Create a new project using CLI init command
2. Add a Button to the index page:

import { Button } from "https://esm.sh/@material-ui/core";

<Button>Test</Button>

3. Error TypeError: window.getComputedStyle is not a function is thrown

Issue

Really excited about this project, it looks so cool - already starting to use it for a personal project to try it out!

I was wondering about the use of / as the default srcDir - in Next.js you are able to use both / and /src, even with pages:

https://nextjs.org/docs/advanced-features/src-directory

The benefits of using src, in my experience, is noticeable when projects start to scale and use more and more tools that require configuration files (e.g .eslintrc, .babelrc, tsconfig.js, npm/yarn files etc). When this starts to happen, the top-level of projects can get cluttered with lots of files, and it's nice to be able to separate config files from source code.

A quick example: https://github.com/vercel/swr, lots of config files but all source code in /src

Solutions

If this is an issue that you agree with and would like to tackle then there are a couple of initial solutions:

Easy solution

Changing the srcDir completely from / to src

• Good: one-liner code change:

aleph.js/project.ts

Line 79 in 6940dcf

srcDir: '/',

Change to srcDir: '/src',

• Bad: forces everyone to have to use /src, including /src/pages which is commonly top-level in Next.js projects

Slightly-less-easy solution

Offer a choice between / and /src

• Good: another one-liner code change

aleph.js/project.ts

Line 79 in 6940dcf

srcDir: '/',

Change to srcDir: existsDirSync('/src') ? '/src' : '/',

• Good: means people can choose and aren't forced into using /src, which can be a preference for small projects
• Bad: Unless you do some more changes to the code, there's no hybrid option with this (e.g if someone wants to use /pages at top-level but wants all other source code in /src, as is common in Next.js projects

Other

Not familiar with the codebase but I'm sure there would be a solution to offer the hybrid approach if that is preferred.

Conclusion

Quite a big description for such a small change, but let me know what your thoughts are!

Hi, im trying to using swr using the example from documentation here with little bit modifications

import useSWR from "https://esm.sh/swr"
import Axios from "https://esm.sh/axios";

const fetcher = (url: string) => Axios.get(url).then(({ data }) => data);

export default function About() {
  const { data } = useSWR('/api/me, fetcher)

  if (!data) {
    return <div>loading...</div>
  }
  return <div>hello {data.name}!</div>
}

when i trying to visit that page for the first time, gives me error message, and suddenly commands killed.

INFO Server ready on http://localhost:8080
ERROR ReferenceError: navigator is not defined
    at file:///home/hehex/a/.aleph/development.es2018/-/cdn.esm.sh/v4/[email protected]/es2018/swr.development.js:187:55
error: Uncaught ReferenceError: navigator is not defined
    at file:///home/hehex/a/.aleph/development.es2018/-/cdn.esm.sh/v4/[email protected]/es2018/swr.development.js:187:55

using Axios works pretty well, i think it because they trying to access navigation object through server side, that supposed to be in browser only.

var slowConnection = typeof window !== "undefined" && navigator["connection"] && ["slow-2g", "2g"].indexOf(navigator["connection"].effectiveType) !== -1;

The browser can load modules but not render pages.

Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134

I want to get url query params,but I can't get it by using useRouter

// open link: `https://localhost:8080/?q=deno`

export default function Home() {
const r = useRouter()
console.log(r.query.q)
// got undefined
console.log(location.href)
// server log: https://localhost:8080/q=deno
// browser log: https://localhost:8080/?q=deno
return <div>hello world</div>
}

I'm trying to add Tailwind to app.tsx:

app.tsx

import "https://unpkg.com/[email protected]/dist/tailwind.min.css"

but I'm getting:

ERROR TypeError: Cannot resolve module "file:///home/k/-/deno.land/x/aleph/head.js" from "file:///home/k/GitHub/aleph-operator-lookup/.aleph/development.es2018/-/unpkg.com/[email protected]/dist/tailwind.css.js".
    at file:///home/k/GitHub/aleph-operator-lookup/.aleph/development.es2018/-/unpkg.com/[email protected]/dist/tailwind.css.js:1:0
WARN page '/-/deno.land/x/aleph/head.js' not found

Currently, the aleph.js cli only provides the option to change the port number.

However sometimes, a user may also want to change the hostname.

For example -
aleph dev --host 0.0.0.0 --port 8080

Should I implement this feature or this unnecessary?

Hey, I'm trying to use web3 from ESM

import Web3 from "https://esm.sh/web3"

export default function Home() {
  return null;
}

But when loading the page I'm getting this error

TypeError: Buffer.from is not a function
    at varintEncode (file:///.../.aleph/development.es2018/-/cdn.esm.sh/v11/[email protected]/es2018/web3.development.js:31889:23)
    at file:///.../.aleph/development.es2018/-/cdn.esm.sh/v11/[email protected]/es2018/web3.development.js:31900:37
    at file:///.../.aleph/development.es2018/-/cdn.esm.sh/v11/[email protected]/es2018/web3.development.js:69:9
    at file:///.../.aleph/development.es2018/-/cdn.esm.sh/v11/[email protected]/es2018/web3.development.js:31930:33
    at file:///.../.aleph/development.es2018/-/cdn.esm.sh/v11/[email protected]/es2018/web3.development.js:69:9
    at file:///.../.aleph/development.es2018/-/cdn.esm.sh/v11/[email protected]/es2018/web3.development.js:34701:18
    at file:///.../.aleph/development.es2018/-/cdn.esm.sh/v11/[email protected]/es2018/web3.development.js:69:9
    at file:///.../.aleph/development.es2018/-/cdn.esm.sh/v11/[email protected]/es2018/web3.development.js:34738:23
    at file:///.../.aleph/development.es2018/-/cdn.esm.sh/v11/[email protected]/es2018/web3.development.js:69:9
    at file:///.../.aleph/development.es2018/-/cdn.esm.sh/v11/[email protected]/es2018/web3.development.js:34833:23

I was reading the documentation about the useDeno hook and it says:

In Next.js, two functions called getStaticProps and getServerSideProps are used by the pages to fetch data at build time(SSR) or on each request. This solution isolates the data and view likes different roles of the back-end and front-end.

In Aleph.js, we prefer the mixed solution, a react hook called useDeno provided that allows you fetch data at build time(SSR) in a component with Deno runtime, that's more React Style likely:

After reading the examples, it appears you can only use the getStaticProps approach from Next (ie. fetching data at build time), but that there is no way to use the getServerSideProps approach?

A common use case for this that I don't understand how to solve in Aleph:

• I have a site that needs to fetch some data locked behind a Bearer token. I want to pass this data as the initial props data to the component. I don't want this code in the frontend bundle.
• I don't plan to hydrate this data on the frontend at all after initial load.

Is this use case not supported in Aleph? If not, it hampers the functionality to unusable levels for our projects. If it is indeed possible, can you please document how to use useDeno together with dynamic SSR that can fetch data on each request?

appliaction should be application

It would be great to have an optimized image component.

Refs:
NextJS Image implementation

I would like to use preact instead of react :-)

Here's the roadmap for v0.3.0 updates.

Features

• plugin system
• framework system
• new jsx transform
• jsx magic
• inline style
• analyze for production

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)

• use swc compiler in Rust instead of tsc
• bundle code in production mode by esbuild
• polyfills
  • es5
  • es2015 - es2021

Plugins

• builtin css-loader with postcss processor
• sass-loader (improved by @shadowtime2000 (#41))
• wasm-loader
• markdown-loader

APIs

• support middlewares
• decodeBody readBody (#35) thanks @shinspiegel

Server

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

Improvements

• simplify cli output
• init command UI (#47)
• ErrorBoundary UI

Optimization

• modulepreload (#9) @shadowtime2000
• cache remote deps
• compilation symlink mode

Deployment platform support

• Vercel
  • build
  • APIs(functions)

add build(SSG) workspace to avoid SSR interference

• serverHeadElements
• serverScriptsElements
• serverStyles

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

export default async function handler(req: APIRequest) {
  req.status(200).json({ data: 'test' })
}

// pages/index.tsx
import { useDeno } from "https://deno.land/x/aleph/mod.ts";
import React from "https://esm.sh/react";

export default function Home() {
  const testData = useDeno(async () => {
    const { data } = await fetch(
      "http://localhost:8080/api/test",
      { method: "GET" },
    ).then((res) => res.json());
    return data;
  });

  return (
    <div className="page">
      {testData}
    </div>
  );
}

When request http://.../api/test it will send { data: "test" } but after requesting the index page, the server pend all requests.

If it's possible to make and compiling error in the page like in the console this is will be good. Each time that we got a compile error we must see in the console and we don't know what's line the error is. it's not good for the user experience

A lot of existing libraries design for Nodejs checking whether it's server side or client side by running typeof window === 'undefined'. But in Deno, window is not undefined.

For example when trying to use typestyle, server will crash with this error message:

Because there code check it's a server or not by checking window is undefined or not: https://github.com/typestyle/typestyle/blob/master/src/internal/typestyle.ts#L65

Hi,

I removed logo from index.tsx and app.tsx but aleph logo is still present in title of webpage.

That's my config file:

import sass from 'https://deno.land/x/[email protected]/plugins/sass.ts'
export default {
  plugins: [sass]
}

It returns an error:

error: Uncaught (in promise) TypeError: renderSync is not a function
        const ret = renderSync({
                    ^
    at Object.transform (sass.ts:8:21)
    at Project._compile (project.ts:991:66)
    at async Project._compile (project.ts:1127:28)
    at async Project._init (project.ts:627:25)
    at async project.ts:106:13
    at async start (server.ts:12:5)

Due to the lack of URL encoding processing, requesting a URL with spaces / unicode strings / more for the pages / APIs / static files will result in a 404 error.

File structure

• "public"
  • "a b" <- with space!
    • "c.txt"

Request

https://localhost:8080/a b/c.txt
// Almost all web browsers encode this to "http://localhost:8080/a%20b/c.txt"

-> 404 - Page Not Found

When using Aleph's routing, if I refer to components from files under the "/pages/" folder, the URL will become dirty as the folder layer gets deeper. Therefore, I want to replace the project root folder with "@ /". This is possible with simple Deno projects but Aleph.js can't compile them.

Is there a solution?

./import_map.json

{
    "imports": {
        "react": "https://esm.sh/react",
        "@/": "./"
    }
}

import in a page file

// import React from 'https://esm.sh/react';
import React from 'react';    // ALL OK
// import Navigation from '../../../components/Navigation.ts';
import Navigation from '@/components/Navigation.ts';    // VS Code editor OK, Aleph compile NG

error message

error: Uncaught (in promise) NotFound: No such file or directory (os error 2)
    at processResponse (core.js:224:13)
    at Object.jsonOpAsync (core.js:242:12)
    at async open (deno:cli/rt/30_files.js:44:17)
    at async Object.readFile (deno:cli/rt/40_read_file.js:15:18)
    at async Project._compile (project.ts:977:29)
    at async Project._compile (project.ts:1127:28)
    at async Project._init (project.ts:613:21)
    at async project.ts:106:13
    at async start (server.ts:12:5)

reference

• https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
• https://amp.dev

Off-topic

Hi guys, first of all congratulations on the library it seems really promising. It actually got me into deno again, I'll be trying it in some hobby projects and maybe in the future contribute for it to get production-ready.

This "issue" is actually a discussion, but as the discussion feature is not available I think it might not be bad submitting an issue, you guys can close and suggest me a better place if I'm wrong.

Necessity of VSCode-specific files

I would like to understand the necessity of the library adding VSCode-specific files when using the CLI init command. This is the first template that I see doing it and think it was really unnecessary but I still would like to understand better the necessity of it.

My suggestion would be either making it an optional flag or using --template like CRA.

A new component system will ship as part of v0.4, I want to try some new ideas to write components with JSX which should be simple, fast and typed. Those ideas are inspired by React and Svelte, it's standard JSX syntax, and with high performance AOT compiler in Rust. Core features include:

• Born in Typescript
• With Standard JSX Syntax
• AOT Compiler in Rust
• No Virtual DOM
• Reactive
• Builtin Styling
• SSR

import Logo from './Logo.alef'

const name: Prop<string> = 'World' // prop

let n: number = 0 // state
const double: Memo<number> = 2 * n // memo

// effect
$: () => {
  console.log('mounted')
  return () => console.log('unmounted')
}

function increase() {
  n++ // eq `setN(n => n+1)`
}

// elements
$t:
<div>
  <Logo />
  <h1>Hello {name}!</h1>
  <p onClick={increase}>double is {double}</p>
</div>

// styling
$style: `
  /* unused h1 (tree-shaking) */
  h1 {
    font-size: 200%;
  }
  p {
    color: ${Math.abs(n) >= 10 ? 'red' : 'green'}    
  }
`

Please star https://github.com/alephjs/alef-component to get project progress.

The default syntax is

export default function Home(){
  // ...
}

but when I use an arrow function

export default () => {
  // ...
}

I get a blank page with 400 - Module "undefined" should export a React Component as default

However, it works when declaring then exporting

const Home = () => {
  // ...
}

export default Home

or when using forwardRef

export default forwardRef((props, ref) => {
  // ...
})

It would be great if we allowed arrow functions as well as regular functions, what do you think about it?

Because this project does not bundle the output of a build it is importing from links at runtime. We should probably add <link rel="preload" /> tags in the header for the static output so the browser knows to start fetching those files.

It seems like PostCSS has an official Deno package, but it is currently lacking Typescript support. We could do some sort of type casting to get some types, or we could wait until it gets Typescript type support.

Currently the 404 error response for api's has been hardcoded.

Will it be feasible to allow a custom /api/404.ts for errors or will that be unnecessary?

I'm working with taildwind and twin.macro to build re-usable components easily.

Will aleph support twin.macro or something like emotion or styled-components etc to make component building easier in upcoming version?

Or there are better way to build re-usable components by tailwind and aleph?

What is React Server Components?

Please watch this talk introducing experimental Server Components. The talk includes a walkthrough of the demo code and highlights key points of how Server Components work and what features they provide.

React IO in Deno

React IO Library for experimental React Server Components in Deno.

import fetch from 'https://deno.land/x/react_io/fetch.ts'
import { readFile } from 'https://deno.land/x/react_io/fs.ts'
import { Pool } from 'https://deno.land/x/react_io/pg.ts'

please follow https://github.com/alephjs/react-io