core: set up repo

.gitignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+.vite

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "deno.enable": true,
+  "deno.unstable": true,
+  "deno.config": "./deno.json"
+}

deno-entry.ts

@@ -0,0 +1,25 @@
+import { createRequestHandler } from "./walk.ts";
+import { serve } from "https://deno.land/[email protected]/http/server.ts";
+import { fromFileUrl } from "https://deno.land/[email protected]/path/mod.ts";
+import { walk } from "https://deno.land/[email protected]/fs/walk.ts";
+import { serveDir } from "https://deno.land/[email protected]/http/file_server.ts";
+
+// deno-lint-ignore no-explicit-any
+(globalThis as any).process = { env: Deno.env.toObject() };
+
+const { default: handler } = await import("./dist/server/hattip.mjs");
+
+serve(
+  createRequestHandler(handler, {
+    staticDir: fromFileUrl(
+      new URL(
+        // Bundled entry sits next to the client directory
+        Deno.env.get("DENO_DEPLOYMENT_ID") ? "./client" : "./dist/client",
+        import.meta.url
+      )
+    ),
+    walk,
+    serveDir,
+  }),
+  { port: Number(Deno.env.get("PORT")) || 3000 }
+);

deno.json

@@ -0,0 +1,13 @@
+{
+  "tasks": {
+    "dev": "deno run -A --node-modules-dir npm:[email protected]",
+    "build": "deno run -A --node-modules-dir npm:[email protected] build",
+    "serve": "deno run -A --node-modules-dir --import-map=import_map.prod.json deno-entry.ts",
+    "deploy": "deno run -A npm:@hattip/[email protected] deno-entry.ts dist/deploy-entry.js && cd dist && deployctl deploy --project=rakkas ./deploy-entry.js --exclude server"
+  },
+  "importMap": "import_map.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}

import_map.json

@@ -0,0 +1,7 @@
+{
+  "imports": {
+    "rakkasjs": "https://esm.sh/*[email protected]",
+    "react": "https://esm.sh/*[email protected]",
+    "react/": "https://esm.sh/*[email protected]/"
+  }
+}

import_map.prod.json

@@ -0,0 +1,10 @@
+{
+  "imports": {
+    "rakkasjs": "npm:[email protected]",
+    "react": "npm:[email protected]",
+    "react/": "npm:/[email protected]/",
+    "react-dom/server.browser": "npm:[email protected]/server.browser",
+    "@hattip/compose": "npm:@hattip/[email protected]",
+    "devalue": "npm:[email protected]"
+  }
+}

readme.md

@@ -0,0 +1,22 @@
+# Rakkas on Deno
+
+There is some manual boilerplate here to work around some issues but it works!
+
+## Getting started
+
+Clone with:
+
+```bash
+deno run -A npm:degit rakkasjs/deno-template rakkas-deno
+```
+
+## Available tasks
+
+| Tasks               | Description                       |
+| ------------------- | --------------------------------- |
+| `deno task dev`     | Start the development server      |
+| `deno task build`   | Build the project for production  |
+| `deno task serve`   | Serve the production build        |
+| `deno task deploy`¹ | Deploy the project to Deno Deploy |
+
+¹ Edit the `deno.json` file to change the project ID and add your deploy token (or use the `DENO_DEPLOY_TOKEN` environment variable).

src/crud.ts

@@ -0,0 +1,54 @@
+// This is our mock database. The data won't persist between server restarts
+// and it won't work in serverless or edge environments. It's a convenient way
+// to demonstrate how a CRUD app works though.
+
+export interface TodoItem {
+  id: number;
+  text: string;
+  done: boolean;
+}
+
+let todoItems: TodoItem[] = [
+  {
+    id: 1,
+    text: "Learn Deno",
+    done: true,
+  },
+  {
+    id: 2,
+    text: "Learn React",
+    done: true,
+  },
+  {
+    id: 3,
+    text: "Learn Rakkas",
+    done: false,
+  },
+];
+
+let nextId = 3;
+
+// Simple CRUD functions
+
+export function readAllTodos(): TodoItem[] {
+  return todoItems;
+}
+
+export function createTodo(item: Omit<TodoItem, "id">): number {
+  todoItems.push({ ...item, id: nextId });
+  return nextId++;
+}
+
+export function updateTodo(id: number, data: TodoItem): TodoItem | undefined {
+  const found = todoItems.find((x) => x.id === id);
+
+  if (found) {
+    Object.assign(found, data);
+  }
+
+  return found;
+}
+
+export function deleteTodo(id: number): void {
+  todoItems = todoItems.filter((x) => x.id !== id);
+}

src/css-module.d.ts

@@ -0,0 +1,2 @@
+declare const classes: Record<string, string>;
+export default classes;

src/routes/about.page.tsx

@@ -0,0 +1,29 @@
+import { FC } from "react";
+
+const AboutPage: FC = () => (
+  <main>
+    <h1>About</h1>
+    <p>
+      <b>Rakkas</b> aims to be a{" "}
+      <a href="https://reactjs.org" target="_blank" rel="noreferrer">
+        React
+      </a>{" "}
+      framework powered by{" "}
+      <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+        Vite
+      </a>
+      , with a developer experience inspired by{" "}
+      <a href="https://nextjs.org" target="_blank" rel="noreferrer">
+        Next.js
+      </a>{" "}
+      and{" "}
+      <a href="https://kit.svelte.dev" target="_blank" rel="noreferrer">
+        Svelte Kit
+      </a>
+      . Pages of a Rakkas web applications are rendered on the server-side and
+      hydrated on the client side.
+    </p>
+  </main>
+);
+
+export default AboutPage;

src/routes/index.page.tsx

@@ -0,0 +1,24 @@
+import { Page } from "rakkasjs";
+
+const HomePage: Page = function HomePage() {
+  return (
+    <main>
+      <h1>Hello world!</h1>
+      <p>Welcome to Rakkas demo page.</p>
+      <p>
+        Try editing the files in <code>src/routes</code> to get started or go to
+        the{" "}
+        <a href="https://rakkasjs.org" target="_blank" rel="noreferrer">
+          website
+        </a>
+        .
+      </p>
+      <p>
+        You may also check the little <a href="/todo">todo application</a> to
+        learn about API endpoints and data fetching.
+      </p>
+    </main>
+  );
+};
+
+export default HomePage;

src/routes/layout.module.css

@@ -0,0 +1,94 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: #333;
+  font-size: 16px;
+  min-width: 360px;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  color: #924;
+  text-decoration: none;
+}
+
+nav a {
+  padding: 8px;
+  border-radius: 8px;
+}
+
+a:hover {
+  color: #c06;
+  text-decoration: underline;
+}
+
+main {
+  max-width: 40em;
+  margin: auto;
+  line-height: 1.6;
+}
+
+.header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: center;
+  padding-right: 1em;
+  padding-bottom: 1em;
+  border-bottom: solid 1px #ddd;
+}
+
+@media (min-width: 600px) {
+  .header {
+    justify-content: space-between;
+  }
+}
+
+.header > * {
+  margin-left: 1em;
+  margin-top: 1em;
+}
+
+.logo {
+  font-size: 150%;
+  font-weight: bold;
+}
+
+.nav ul {
+  padding: 0;
+  margin: 0;
+}
+
+.nav li {
+  display: inline-block;
+  list-style-type: none;
+}
+
+.nav li:not(:last-child) {
+  margin-right: 1em;
+}
+
+.header a {
+  text-decoration: none;
+}
+
+.activeLink {
+  background-color: #ddd;
+}
+
+.main {
+  padding: 0 1em 1em;
+  min-height: calc(100vh - 16rem);
+}
+
+.footer {
+  font-size: small;
+  text-align: center;
+  margin-top: 2rem;
+  padding: 1em;
+  border-top: solid 1px #eef;
+}

src/routes/layout.tsx

@@ -0,0 +1,66 @@
+// This is the main layout of our app. It renders the header and the footer.
+
+import { Head, Link, StyledLink, Layout } from "rakkasjs";
+
+// Vite supports CSS modules out of the box!
+// @deno-types="../css-module.d.ts"
+import css from "./layout.module.css";
+
+const MainLayout: Layout = ({ children }) => (
+  <>
+    {/* Rakkas relies on react-helmet-async for managing the document head */}
+    {/* See their documentation: https://github.com/staylor/react-helmet-async#readme */}
+    <Head title="Rakkas Demo App" />
+
+    <header className={css.header}>
+      {/* <Link /> is like <a /> but it provides client-side navigation without full page reload. */}
+      <Link className={css.logo} href="/">
+        Rakkas Demo App
+      </Link>
+
+      <nav className={css.nav}>
+        <ul>
+          <li>
+            {/* <StyledLink /> is like <Link /> but it can be styled based on the current route which is useful for navigation links. */}
+            <StyledLink href="/" activeClass={css.activeLink}>
+              Home
+            </StyledLink>
+          </li>
+          <li>
+            <StyledLink href="/about" activeClass={css.activeLink}>
+              About
+            </StyledLink>
+          </li>
+          <li>
+            <StyledLink href="/todo" activeClass={css.activeLink}>
+              Todo
+            </StyledLink>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    <section className={css.main}>{children}</section>
+
+    <footer className={css.footer}>
+      <p>
+        Software and documentation: Copyright 2021 Fatih Aygün. MIT License.
+      </p>
+
+      <p>
+        Favicon: “Flamenco” by{" "}
+        <a href="https://thenounproject.com/term/flamenco/111303/">
+          gzz from Noun Project
+        </a>{" "}
+        (not affiliated).
+        <br />
+        Used under{" "}
+        <a href="https://creativecommons.org/licenses/by/2.0/">
+          Creative Commons Attribution Generic license (CCBY)
+        </a>
+      </p>
+    </footer>
+  </>
+);
+
+export default MainLayout;