• Stars
    star
    103
  • Rank 331,207 (Top 7 %)
  • Language
    JavaScript
  • Created over 5 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A create-react-app like template using only es-modules (no build step).

create-es-react-app

A create-react-app like template demonstrating how far you can get creating progressive web apps (using react) with no build step. It takes advantage of static and dynamic imports which enables you to break up your app into small reusable ES modules that are compiled for you by the browser at run time.

Getting Started

To get started, first clone this repo then run the following command in your terminal (from the project root directory) which will open the app in your preferred browser.

$ npx servor

Live reload is enabled by default with servor so when you make changes to your code the browser will reload the tab and your changes will be reflected there.

Implementation

This project uses a proprietary version of react called es-react which allows you to import React and ReactDOM (version 16.8.3) as an es module from within your app and component files.

import { React, ReactDOM } from 'https://unpkg.com/es-react';

To use JSX like syntax without a transpilation step you are going to need to use something like htm by Jason Miller. The package is available to import directly from unpkg.com and can be configured for react like this:

import htm from 'https://unpkg.com/htm?module'
const html = htm.bind(React.createElement)

Code splitting on route is achieved at runtime thanks to React.lazy and React.Suspense which provides a solid basis for a scalable architecture where only the code that required is actually requested from the server.

const Route = {
  '/': React.lazy(() => import('./routes/home.js')),
  '*': React.lazy(() => import('./routes/notfound.js')),
}

ReactDOM.render(
  html`
    <${React.Suspense} fallback=${html`<div></div>`}>
      <${Route[location.pathname] || Route['*']} />
    <//>
  `,
  document.body
)

Todo

This project is a proof of concept more than anything and still lacks certain features:

  • A solution for applying scoped styles to components (something like emotion or styled-components tagged template literals) that can be imported as an es module.
  • A more feature complete router that handles internal links and history navigation (something like reach-router or navi) and that can be imported as an es module.

The most common limitation I come across is that the popular solutions to these kind of problems rarely export an es module compatible build. If you know of any packages that might accomplish such tasks and that have an es module build then I would love to hear about them so that we can try them out and promote them here!

More Repositories

1

react-slack-clone

Complete chat application, built with Chatkit | by @lukejacksonn
JavaScript
1,349
star
2

perflink

Low friction JavaScript benchmarks that you can share via URL
JavaScript
1,206
star
3

servor

Dependency free file server for single page app development
JavaScript
1,026
star
4

ijk

Transforms arrays into virtual dom trees; a terse alternative to JSX and h
JavaScript
467
star
5

oceanwind

Compiles tailwind shorthand into css at runtime. Succeeded by Twind.
JavaScript
264
star
6

GreedyNav

A responsive navigation menu that stacks items into a dropdown menu when they overflow
JavaScript
232
star
7

es-react

ES6 module exposing the latest version of react and react-dom
JavaScript
231
star
8

csz

Runtime CSS modules with SASS like preprocessing
JavaScript
218
star
9

monacode

An es-module wrapper around the monaco editor and prettier
JavaScript
165
star
10

hyperapp-pwa

A minimalist, progressive web app compliant template for hyperapp projects
JavaScript
72
star
11

domz

A proxy function to help build virtual DOM trees from functions
JavaScript
62
star
12

hyperapp-electron

A minimal electron app starter with hyperapp, livereload and redux devtools
JavaScript
51
star
13

Actuate

One line easy actuation of CSS animation sequences
JavaScript
41
star
14

chattery

A GitHub action that creates chatrooms for pull requests
Ruby
29
star
15

esm

A single file es module prototyping tool
JavaScript
29
star
16

blub

[POC] resolving es module dependency graphs on the server
JavaScript
27
star
17

deployable

A ready-to-deploy static web app template and tutorial
HTML
25
star
18

hyperapp-firebase-auth

πŸ”₯ Drop in authentication for hyperapps using firebase
JavaScript
19
star
19

Lorem

Generates random lorem ipsum snippets
JavaScript
19
star
20

Malette

A color picker tool for the google material design palette
JavaScript
18
star
21

cube

Rubik's Cube simulator with F2L/OLL/PLL algorithms
JavaScript
16
star
22

hyperapp-wiki

Example of how hyperapp could be used to serve its on wiki with gh-pages
HTML
13
star
23

blog

A forkable personal blog that runs on GitHub pages. Demo πŸ‘‰
JavaScript
12
star
24

hyperapp-hn

First attempt at a community hacker news PWA built with HyperApp
JavaScript
10
star
25

vuid

❄️ Very unique identifiers in the browser using web cryptography (144b)
JavaScript
10
star
26

hyperapp-fetch

A component to fetch and cache data before rendering a view
JavaScript
10
star
27

tetris

The classic NES Tetris built with hyperapp
JavaScript
9
star
28

ipsums

Generate random amounts of lorem ipsum text
JavaScript
8
star
29

framer

Easily apply a frame overlay to an avatar photo
JavaScript
8
star
30

hyperapp-starter

A minimalist starter for hyperapp projects
JavaScript
6
star
31

Protohype

A set of aliases for commonly used CSS properties and values
CSS
5
star
32

hyperapp-router

A frontend router for hyperapp view switching
JavaScript
4
star
33

preroll

An opinionated web project builder with dev server
JavaScript
3
star
34

streamer

🚰 Streams of reasonably interesting data published reasonably stochastically
JavaScript
2
star
35

fb-sdk

Load and queue calls to the facebook sdk
JavaScript
2
star
36

dankon

πŸ—Ί Learn to express your gratitude in 140+ different languages
JavaScript
2
star
37

huy

useful h function ui elements
JavaScript
2
star
38

plural

picture-in-picture interface for youtube videos
JavaScript
2
star
39

hyperapp-two

A multi-page and multi-component boilerplate hyperapp project
JavaScript
2
star
40

xs

An extra small, stand alone web application template
HTML
1
star
41

youtube-eco

A chrome extension that optimizes youtube streaming quality
JavaScript
1
star
42

hyperapp-unite

A utility function for merging reducers, effects and routes with safe namespacing
JavaScript
1
star
43

Stash

A jQuery plugin that can instigate application/octet-stream downloads of local content
JavaScript
1
star
44

Browver

A JavaScript plugin that detects if a browser is too and points to the latest browser downloads..
JavaScript
1
star
45

lukejacksonn.github.io

My personal homepage to be hosted at http://lukejacksonn.com
HTML
1
star
46

gitinit

Create a new git repo based on an already existing repository
JavaScript
1
star
47

feeder

My awesome pusher feeds app (test)
JavaScript
1
star
48

loginn

A set of lambda functions and frontend components to aid authentication
JavaScript
1
star
49

create-pusher-app

An experiment with yeoman, hyperapp and the Pusher Feeds API
JavaScript
1
star
50

lukejacksonn

1
star