From e05d982e88dc0af068444681ae3e01724ad2924f Mon Sep 17 00:00:00 2001 From: Daniel Moore Date: Fri, 1 Sep 2023 12:31:23 -0700 Subject: [PATCH 1/4] cheatsheet -> reference --- civet.dev/.vitepress/components/Hero.vue | 4 ++-- civet.dev/.vitepress/{config.js => config.mjs} | 6 +++--- civet.dev/.vitepress/{head.js => head.mjs} | 0 .../utils/{getContributors.js => getContributors.mjs} | 0 civet.dev/comparison.md | 2 +- civet.dev/index.md | 4 ++-- civet.dev/{cheatsheet.md => reference.md} | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) rename civet.dev/.vitepress/{config.js => config.mjs} (95%) rename civet.dev/.vitepress/{head.js => head.mjs} (100%) rename civet.dev/.vitepress/utils/{getContributors.js => getContributors.mjs} (100%) rename civet.dev/{cheatsheet.md => reference.md} (99%) diff --git a/civet.dev/.vitepress/components/Hero.vue b/civet.dev/.vitepress/components/Hero.vue index ef2f1f2b..9920ff1f 100644 --- a/civet.dev/.vitepress/components/Hero.vue +++ b/civet.dev/.vitepress/components/Hero.vue @@ -4,8 +4,8 @@ import VPHero from 'vitepress/dist/client/theme-default/components/VPHero.vue'; const actions = [ { theme: 'brand', - text: 'Cheatsheet', - link: '/cheatsheet', + text: 'Reference', + link: '/reference', }, { theme: 'alt', diff --git a/civet.dev/.vitepress/config.js b/civet.dev/.vitepress/config.mjs similarity index 95% rename from civet.dev/.vitepress/config.js rename to civet.dev/.vitepress/config.mjs index 5271c0ca..27e314f0 100644 --- a/civet.dev/.vitepress/config.js +++ b/civet.dev/.vitepress/config.mjs @@ -1,6 +1,6 @@ import pkg from '../../package.json'; -import { head } from './head.js'; -import { getContributors } from './utils/getContributors.js'; +import { head } from './head.mjs'; +import { getContributors } from './utils/getContributors.mjs'; import { defineConfig } from 'vitepress'; import { compileCivet } from './utils/compileCivet'; import { getHighlighter } from './utils/getHighlighter'; @@ -26,7 +26,7 @@ export default async function vitePressConfig() { siteTitle: 'Civet', nav: [ { text: 'Getting started', link: '/getting-started' }, - { text: 'Cheatsheet', link: '/cheatsheet' }, + { text: 'Reference', link: '/reference' }, { text: 'Comparison', link: '/comparison' }, { text: 'Integrations', link: '/integrations' }, { text: 'Config', link: '/config' }, diff --git a/civet.dev/.vitepress/head.js b/civet.dev/.vitepress/head.mjs similarity index 100% rename from civet.dev/.vitepress/head.js rename to civet.dev/.vitepress/head.mjs diff --git a/civet.dev/.vitepress/utils/getContributors.js b/civet.dev/.vitepress/utils/getContributors.mjs similarity index 100% rename from civet.dev/.vitepress/utils/getContributors.js rename to civet.dev/.vitepress/utils/getContributors.mjs diff --git a/civet.dev/comparison.md b/civet.dev/comparison.md index e66681c9..e147715c 100644 --- a/civet.dev/comparison.md +++ b/civet.dev/comparison.md @@ -165,7 +165,7 @@ $: document.title = title ## Decorators Civet uses `@` as -[shorthand for `this`, `static`, and `constructor`](/cheatsheet#this). +[shorthand for `this`, `static`, and `constructor`](/reference#this). Decorators need to be written with `@@`: diff --git a/civet.dev/index.md b/civet.dev/index.md index 0837051d..a1d4d74d 100644 --- a/civet.dev/index.md +++ b/civet.dev/index.md @@ -18,7 +18,7 @@ so you can [use existing tooling](/integrations) but enable concise and powerful syntax. In addition to 99% JS/TS [compatibility](/comparison), there are many features, with some highlights below and more comprehensive examples -on the [cheatsheet](/cheatsheet). +in the [reference](/reference). See also Civet's [design philosophy](/philosophy). ## Highlights: Beyond TC39 @@ -174,7 +174,7 @@ export a, b, c from "./cool.js" export x = 3 -### [JSX](/cheatsheet#jsx) +### [JSX](/reference#jsx) function Listing(props) diff --git a/civet.dev/cheatsheet.md b/civet.dev/reference.md similarity index 99% rename from civet.dev/cheatsheet.md rename to civet.dev/reference.md index a3a387aa..8843c4c5 100644 --- a/civet.dev/cheatsheet.md +++ b/civet.dev/reference.md @@ -1,5 +1,5 @@ --- -title: Cheatsheet +title: Reference aside: false --- From 03e191e23455a2833f9889da9a85c7fad1214906 Mon Sep 17 00:00:00 2001 From: Daniel Moore Date: Sun, 3 Sep 2023 11:27:34 -0700 Subject: [PATCH 2/4] basic cheatsheet --- civet.dev/.vitepress/components/Hero.vue | 5 + civet.dev/.vitepress/config.mjs | 1 + civet.dev/cheatsheet.md | 185 +++++++++++++++++++++++ 3 files changed, 191 insertions(+) create mode 100644 civet.dev/cheatsheet.md diff --git a/civet.dev/.vitepress/components/Hero.vue b/civet.dev/.vitepress/components/Hero.vue index 9920ff1f..51134bee 100644 --- a/civet.dev/.vitepress/components/Hero.vue +++ b/civet.dev/.vitepress/components/Hero.vue @@ -7,6 +7,11 @@ const actions = [ text: 'Reference', link: '/reference', }, + { + theme: 'alt', + text: 'Cheatsheet', + link: '/cheatsheet', + }, { theme: 'alt', text: 'Civet playground', diff --git a/civet.dev/.vitepress/config.mjs b/civet.dev/.vitepress/config.mjs index 27e314f0..3771e741 100644 --- a/civet.dev/.vitepress/config.mjs +++ b/civet.dev/.vitepress/config.mjs @@ -27,6 +27,7 @@ export default async function vitePressConfig() { nav: [ { text: 'Getting started', link: '/getting-started' }, { text: 'Reference', link: '/reference' }, + { text: 'Cheatsheet', link: '/cheatsheet'}, { text: 'Comparison', link: '/comparison' }, { text: 'Integrations', link: '/integrations' }, { text: 'Config', link: '/config' }, diff --git a/civet.dev/cheatsheet.md b/civet.dev/cheatsheet.md new file mode 100644 index 00000000..4e0b75d6 --- /dev/null +++ b/civet.dev/cheatsheet.md @@ -0,0 +1,185 @@ +--- +title: Cheatsheet +aside: false +--- + +# {{ $frontmatter.title }} + +Here's a quick overview of the language. For more detailed information take a look at the [Reference](/reference). + + + +
+ +```ts +// Declarations +const x = 1 +let y: number = 2 +var z: string = "3" +x := 1 // const x = 1 +y .= 2 // let y = 2 + +// Destructuring +[ a, b ] := x +[ ..., last ] := x +[ first, ...rest ] := x +[ first, ..., last ] := x +[ first, ...middle, last] := x + +{ a, b } := c + +``` + +```ts +// Function application +f(x) +f(a, g(x)) +f(...args, cb) + +// Implicit application +f x // f(x) +f a, b, c // f(a, b, c) +f g x // f(g(x)) +f a, b c // f(a, b(c)) + +``` + +```ts +// Conditionals +x && y +x and y // x && y +x || y +x or y // x || y + +// relationals +x === y +x is y // x === y +x < y +x > y +// Chained relationals +x < y < z // x < y && y < z +``` + +```ts +// this +this +// shorthand +@ // this +@x // this.x + +// instance of and typeof shorthand +x instanceof y +x 11 + "it's big" + +unless paused + run() + +// loops +while x < 10 + f(x) + x++ + +for item of items + update item + +for key in object + log key + +for own key in object + log `my ${key}` +``` + +```ts +// Postfix loops/conditionals +f(x) if x +log name for name of names + +``` + +```ts +// Arrow Functions +inc := (x) => x + 1 +add := (a, b): T => a + b + +// Thin arrow -> is equivalent to `function` +f := (this: ctx, a, b) -> + ctx.log a, b if ctx.debug + +``` + +```ts +// Block shorthand +people.map .name // people.map($ => $.name) +numbers.filter & % 2 is 0 +// numbers.filter($ => $ % 2 === 0) + +// # Conditional declarations +throw error if { error } := result + +if [, dir, base] := /^(.*\/)?([^/]*)$/.exec file + console.log dir, base +``` + +```ts +// JSX +// Better binding + + + +// Closing is optional +
+
From a2a1d20194c71d255a5f2b96e7433642607cf099 Mon Sep 17 00:00:00 2001 From: Daniel Moore Date: Sun, 3 Sep 2023 15:35:51 -0700 Subject: [PATCH 3/4] more cheatsheet --- civet.dev/cheatsheet.md | 118 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 117 insertions(+), 1 deletion(-) diff --git a/civet.dev/cheatsheet.md b/civet.dev/cheatsheet.md index 4e0b75d6..7dcfe68e 100644 --- a/civet.dev/cheatsheet.md +++ b/civet.dev/cheatsheet.md @@ -111,7 +111,7 @@ x ' then civet.x++ + when '<' + civet.x-- + civet.x = 0 if civet.x < 0 + else + civet.waiting += 5 +``` + +```ts +// Pattern Matching +switch s + "" + console.log "nothing" + /\s+/ + console.log "whitespace" + "hi" + console.log "greeting" +``` + +```ts +// Pattern destructuring +switch x + [{type: "text", content: /\s+/}, ...rest] + console.log "leading whitespace" + [{type: "text", content}, ...rest] + console.log "leading text:", content + [{type}, ...rest] + console.log "leading type:", type +``` + ```ts // JSX // Better binding @@ -182,4 +215,87 @@ if [, dir, base] := /^(.*\/)?([^/]*)$/.exec file <.item> ``` +```ts +// Object globs +point = data{x,y} +point = data.{x,y}; +point.{x,y} = data +point3D = { point.{x,y}, z: 0 } +complex := obj.{x:a, b.c()?.y} +merged := data.{...global, ...user}; +data.{a, b, ...rest} = result +``` + +```ts +// Property Access +json.x.y +json.'long property' +json.`${movie} name` +matrix.0.0 +array.-1 +``` + +```ts +// Await operators +await.allSettled promises +await.all promises +await.race promises +``` + +```ts +// Range literals +letters := ['a'..'f'] +numbers := [1..10] +reversed := [10..1] +indices := [0...array.length] +``` + +```ts +// slicing and splicing +start := numbers[..2] +mid := numbers[3...-2] +end := numbers[-2..] +numbers[1...-1] = [] +``` + +```ts +// Pipe operator +data +|> Object.keys +|> console.log + +x.length +|> & + 1 +|> .toString() + +fetch url +|> await +|> .json() +|> await +|> return + +// Pipe assignment +data |>= .content +``` + +```ts +// Thick Pipes +array +||> .pop() +||> .push 5 +||> .sort() +||> .reverse() + +count |> & + 1 +||> console.log +|> & * 2 +||> console.log + +url |> fetch |> await +||> (response) => console.log response.status +|> .json() |> await +||> (json) => console.log "json:", json +|> callback +``` +
From dd9bbab6ec3b22abced1392718d1c81a1ccf74fc Mon Sep 17 00:00:00 2001 From: Daniel X Moore Date: Sat, 9 Sep 2023 12:06:59 -0700 Subject: [PATCH 4/4] Update civet.dev/cheatsheet.md Co-authored-by: Erik Demaine --- civet.dev/cheatsheet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/civet.dev/cheatsheet.md b/civet.dev/cheatsheet.md index 7dcfe68e..dea4cc9b 100644 --- a/civet.dev/cheatsheet.md +++ b/civet.dev/cheatsheet.md @@ -160,7 +160,7 @@ people.map .name // people.map($ => $.name) numbers.filter & % 2 is 0 // numbers.filter($ => $ % 2 === 0) -// # Conditional declarations +// Conditional declarations throw error if { error } := result if [, dir, base] := /^(.*\/)?([^/]*)$/.exec file