https://github.com/oliverjam/slug

A snake rip-off using Preact and @pika/web
https://github.com/oliverjam/slug

Last synced: about 6 hours ago
JSON representation

A snake rip-off using Preact and @pika/web

• Host: GitHub
• URL: https://github.com/oliverjam/slug
• Owner: oliverjam
• Created: 2019-04-07T22:36:07.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-09-09T09:55:01.000Z (about 4 years ago)
• Last Synced: 2024-11-14T15:41:38.463Z (6 days ago)
• Language: JavaScript
• Homepage: https://slug.netlify.com/
• Size: 60.5 KB
• Stars: 10
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-list - slug - off using Preact and @pika/web | oliverjam | 11 | (JavaScript)

README

        
# Slug

A snake rip-off built so I could play around with Preact and [@pika/web](https://www.pikapkg.com/blog/pika-web-a-future-without-webpack).

## Run locally

1. Clone this repo

1. Run `npm i`

1. Run `npm run dev` to start a live-reload server

## How it works

We install dependencies with npm (just `preact` and `htm`) like normal. npm will run the `prepare` script in the `package.json` after an `npm install` (with no arguments). This script runs `pika-web`, which will package each dependency into a single ES module file in a `web_modules/` folder.

Since I wanted to be able to import `preact/hooks` I had to configure @pika/web to know exactly what to output into `web_modules/`. This config is in the `package.json`:

```json

"@pika/web": {

  "webDependencies": [

    "htm",

    "preact",

    "preact/hooks"

  ]

}

```

So my final `web_modules` looks like this:

```

├── preact

│   ├── hooks.js

│   └── hooks.js.map

├── htm.js

├── htm.js.map

├── preact.js

└── preact.js.map

```

This allows me to import these dependencies natively in the browser like so:

```

import { h, render } from "./web_modules/preact.js";

import * as Hooks from "./web_modules/preact/hooks.js";

import htm from "./web_modules/htm.js";

```