Sadegh Barati sadeghbarati

Async Computed Values for Vue 3

This gist provides a useAsyncComputed function which allows to create asynchronous dependencies on reactive values (using Vue 3's Composition API).

Requires at least Vue 3.0 and TypeScript 4.0.

Usage

Basic Usage

Cascade Layers, a Proposal

A syntax proposal for Cascade Layers #4470. This does not include full discussion of the Cascade Layer purpose and use-cases, which can be found in the various linked issues, but attempts to answer many of the outstanding questions about how we might implement a layering feature.

Collaborators:

Elika Etemad
Florian Rivoal
Miriam Suzanne
Tab Atkins Jr.

It's 2024. You should use tsup instead of this.

Features

🔥 Blazing fast builds
😇 CommonJS bundle
🌲 .mjs bundle
✨ .d.ts bundle + type-checking

Quick examples

feat: new feature
fix(scope): bug in scope
feat!: breaking change / feat(scope)!: rework API
chore(deps): update dependencies

Commit types

build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
ci: Changes to CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
chore: Changes which doesn't change source code or tests e.g. changes to the build process, auxiliary tools, libraries

	{
	// Snippits that make working with Twin a little easier
	// https://github.com/ben-rogerson/twin.macro
	"Add react import": {
	"scope": "javascript,typescript,typescriptreact",
	"prefix": "react",
	"body": "import React from 'react'",
	"description": "Add react import"
	},
	"Add twin imports": {

	// If the user has been on the page for over 12 hours, the next link
	// click will do a full page transition to get new code
	import React from "react";
	import { BrowserRouter, useLocation } from "react-router-dom";

	let hour = 3600000;

	export default function StaleAppRouter(props) {
	let [isStale, setIsStale] = useState(false);

	---------------------------------------------------------
	Eleventy Benchmark (Node v14.9.0, 1000 templates each)
	---------------------------------------------------------
	Eleventy 0.10.0
	---------------------------------------------------------
	liquid: ... 3 runs
	* Median: 1.02 seconds
	* Median per template: 1 ms

	njk: ... 3 runs

	<!doctype html>
	<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- CSRF Token -->
	<meta name="csrf-token" content="{{ csrf_token() }}">

	<title>{{ config('app.name', 'Laravel') }}</title>

	var list = [];
	document.querySelectorAll("body *")
	.forEach(function(elem){
	if(elem.getBoundingClientRect().width > document.body.getBoundingClientRect().width){
	list.push(elem.outerHTML.split('>')[0] + '>');
	}
	});
	confirm( "these elements are wider than the viewport:\n\n " + list.join("\n") )

	html {
	scroll-behavior: smooth;
	}
	@media (prefers-reduced-motion: reduce) {
	html {
	scroll-behavior: auto;
	}
	}