Luke Jackson lukejacksonn

## esm-package.md

      
              1 file
            
          
              210 forks
            
          
              7 comments
            
          
              2884 stars
            
          
                sindresorhus
                / esm-package.md
            
            
              Last active
              July 15, 2024 20:29
            
              
                Pure ESM package
              
          
    Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.
This means you have the following choices:

Use ESM yourself. (preferred)

  Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.


## README.md

      
              5 files
            
          
              0 forks
            
          
              0 comments
            
          
              3 stars
            
          
                kitten
                / README.md
            
            
              Last active
              December 10, 2020 17:06
            
              
                How we generated a Tailwind language transformer!
              
          
    Oceanwind

Tailwind, the switch statement

Check out Luke Jackson's full tweet & blog post to see what this is about: https://twitter.com/lukejacksonn/status/1303008696004468737?s=20
Recently, in Luke's blog post he wrote about
how Tailwind styling can be generated from scratch and dynamically, by parsing "Tailwind class
expressions" and transforming them into whole style objects.
This is possible because Tailwind is a sparse but expressive language essentially.

  
## little-vdom-decompiled.js
/* eslint-disable no-unused-vars */
/* eslint-disable no-else-return */

// JSX constructor, similar to createElement()
export const h = (type, props, ...children) => {
	return {
		type,
		// Props will be an object for components and DOM nodes, but a string for
		// text nodes
		props,

## Importable Constructable Stylesheets.md

      
              2 files
            
          
              0 forks
            
          
              4 comments
            
          
              13 stars
            
          
                developit
                / Importable Constructable Stylesheets.md
            
            
              Last active
              September 4, 2021 01:38
            
          
    Proposal: Importable Constructable Stylesheets

We're getting Constructable Stylesheets. This seems like an intuitive value to obtain when importing CSS from JavaScript, since it's the DOM's representation of a Stylesheet:
import stylesheet from './style.css';
console.log(stylesheet);  // CSSStyleSheet
No such system is in place to allow this to work (see [whatwg/loader]), however frontend build tooling has congregated around this approach as a mechanism for bringing CSS assets into the JavaScript module graph. There are many benefits to be obtained from moving CSS into this graph, however the most important is that imported CSS can be attributed to the consuming JS Module. This allows it to be bundled, optimized, and potentially dead-code-eliminated leveraging static analysis performed on the surrounding module graph.

  
## watch.sh
#!/bin/bash

# Invoke like this:
# ./watch.sh my command here
# And it will run 'my command here' once, and then when it detects changes.

# TODO: Don't just search in the last second. Search for updates since the last
# completed build. Otherwise for big directories, midway through your search
# you've already taken 1s and you will miss updates.

## dev_signed_cert.sh
#!/usr/bin/env bash
#
# Usage: dev_signed_cert.sh HOSTNAME
#
# Creates a CA cert and then generates an SSL certificate signed by that CA for the
# given hostname.
#
# After running this, add the generated dev_cert_ca.cert.pem to the trusted root
# authorities in your browser / client system.
#

## README.md

      
              1 file
            
          
              0 forks
            
          
              2 comments
            
          
              3 stars
            
          
                Rich-Harris
                / README.md
            
            
              Last active
              May 31, 2019 14:40
            
              
                rollup-plugin-unpkg behaviour
              
          
    From this Twitter convo. It would be cool to have a plugin that allowed you to use bare module specifiers (import * as React from 'react') in your app, and converted them to unpkg.com URLs.
Say you have these two source files:
// main.js
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import message from './message.js';

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import { h, text, app } from "https://unpkg.com/hyperapp"

      app({
        init: () => 0,
        view: state =>
          h("main", {}, [

## gist:239e384dd914f1cb83a4d4b36af25ea2
/*

In the following examples I will show how an app could be written in
progressively improved potential hyperapp versions

It may not always look like an improvement. I'd have to use an *actually*
complicated app as an example to really prove the benefit. So just use
your imagination :)

But first: the basic app I will be successively improving on. This should

## index.js
const readline = require('readline')
const blank = '\n'.repeat(process.stdout.rows)
console.log(blank)
readline.cursorTo(process.stdout, 0, 0)
readline.clearScreenDown(process.stdout)
	/* eslint-disable no-unused-vars */
	/* eslint-disable no-else-return */

	// JSX constructor, similar to createElement()
	export const h = (type, props, ...children) => {
	return {
	type,
	// Props will be an object for components and DOM nodes, but a string for
	// text nodes
	props,
	#!/bin/bash

	# Invoke like this:
	# ./watch.sh my command here
	# And it will run 'my command here' once, and then when it detects changes.

	# TODO: Don't just search in the last second. Search for updates since the last
	# completed build. Otherwise for big directories, midway through your search
	# you've already taken 1s and you will miss updates.
	#!/usr/bin/env bash
	#
	# Usage: dev_signed_cert.sh HOSTNAME
	#
	# Creates a CA cert and then generates an SSL certificate signed by that CA for the
	# given hostname.
	#
	# After running this, add the generated dev_cert_ca.cert.pem to the trusted root
	# authorities in your browser / client system.
	#
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script type="module">
	import { h, text, app } from "https://unpkg.com/hyperapp"

	app({
	init: () => 0,
	view: state =>
	h("main", {}, [
	/*

	In the following examples I will show how an app could be written in
	progressively improved potential hyperapp versions

	It may not always look like an improvement. I'd have to use an actually
	complicated app as an example to really prove the benefit. So just use
	your imagination :)

	But first: the basic app I will be successively improving on. This should
	const readline = require('readline')
	const blank = '\n'.repeat(process.stdout.rows)
	console.log(blank)
	readline.cursorTo(process.stdout, 0, 0)
	readline.clearScreenDown(process.stdout)