starbucks - a sveltekit utility
Date: 8/27/2021
How starbucks() transforms *.starbucks files to *.svelte files:
A simple webpage
#starbucks webpage
h1 Hello, World!
becomes
<h1>
Hello, World!
</h1>
A simple component
#starbucks component
h1 Hello, World!
becomes
<h1>
Hello, World!
</h1>
NOTE: The above both produce the same output. However, handling of parameters differs between web pages and components
NOTE: The above resembles pug syntax, but it's not.
See attributes below.
Multiple HTML elements
#starbucks webpage
h1 Hello, World!
p a paragraph
becomes
<h1>
Hello, World!
</h1>
<p>
a paragraph
</p>
Nested HTML elements
#starbucks webpage
div
h1 Hello, World!
p a paragraph
becomes
<div>
<h1>
Hello, World!
</h1>
<p>
a paragraph
</p>
</div>
Comments
#starbucks webpage
# --- this is a comment
#
# --- this is another comment
p a paragraph
becomes
<p>
a paragraph
</p>
i.e. both comments and empty lines are ignored. A comment is a line where the first non-whitespace character is a '#' and either 1) the '#' is immediately followed by a whitespace character, or 2) there is nothing following the '#' on the line.
This is true inside script and style sections, as well as markdown. However, in #included markdown files, '# header' will be changed to 'header' followed by '======' and '##header' wil be changed to 'header' followed by '------'.
HTML attributes
#starbucks webpage
p class=bold a paragraph
becomes
<p class="bold">
a paragraph
</p>
#starbucks webpage
p class='bold' a paragraph
becomes
<p class="bold">
a paragraph
</p>
#starbucks webpage
p class="bold" a paragraph
becomes
<p class="bold">
a paragraph
</p>
#starbucks webpage
p.bold a paragraph
becomes
<p class="bold">
a paragraph
</p>
#starbucks webpage
p.bold class="red" a paragraph
becomes
<p class="bold red">
a paragraph
</p>
#starbucks webpage
p.bold name="mine" a paragraph
becomes
<p name="mine" class="bold">
a paragraph
</p>
#starbucks webpage
p.bold name="mine" 'a paragraph'
becomes
<p name="mine" class="bold">
a paragraph
</p>
i.e. you can quote the text contained in an element if you're afraid that it might be interpreted as an attribute
#starbucks webpage
p.bold name="mine" "a paragraph"
becomes
<p name="mine" class="bold">
a paragraph
</p>
Parameters in a component
#starbucks component (name)
h1 title
becomes
<h1>
title
</h1>
<script>
import {undef,say,ask,isEmpty,nonEmpty} from '@jdeighan/coffee-utils'
export var name = undef;
</script>
NOTE: Whenever there is a <script> section, some common functions are
automatically imported. TO DO: check which are actually used and
only import those. Also, there should be a semicolon terminating
the import statement.
NOTE: The export statement should be indented. The blank line should not appear.
Parameters in a web page
#starbucks webpage (name)
h1 title
becomes
<script context="module">
export var load = function({page}) {
return {
props: {name}
};
};
</script>
<h1>
title
</h1>
Substitution of env vars using {{name}}
NOTE: This requires a .env file in a valid location, e.g. a
file named .env in the same dir containing the source starbucks
file containing:
name = John
color = lightGray
Then,
#starbucks webpage
h1 My name is {{name}}
becomes
<h1>
My name is John
</h1>
#starbucks webpage
script
myName = '{{name}}'
becomes
<script>
import {undef,say,ask,isEmpty,nonEmpty} from '@jdeighan/coffee-utils'
var myName;
myName = 'John';
</script>
#starbucks webpage
style
p
background-color: {{color}}
becomes
<style>
p {
background-color: lightGray;
}
</style>
Command #envvar
NOTE: In starbucks syntax, a command is a line on which the first non-whitespace character is '#', which is immediately followed by the name of the command, which always consists of one or more lower-case letters
#starbucks webpage
#envvar lastName = Deighan
p My last name is {{lastName}}
becomes
<p>
My last name is Deighan
</p>
Command #if
#starbucks webpage
#envvar lastName = Deighan
#if known
p My last name is {{lastName}}
#else
p I don't know
becomes
{#if known }
<p>
My last name is Deighan
</p>
{:else}
<p>
I don't know
</p>
{/if}
NOTE: known is a JavaScript variable, and if it changes,
the block of code that is displayed may change. However, lastName
is a constant at the time that this code is generated, and as such,
will always be 'Deighan'.
#starbucks webpage
#envvar lastName = Deighan
#if known
p My last name is {{lastName}}
#elsif standard
p My last name is Smith
#else
p I don't know
becomes
{#if known }
<p>
My last name is Deighan
</p>
{:else if standard }
<p>
My last name is Smith
</p>
{:else}
<p>
I don't know
</p>
{/if}
Command #for
#starbucks webpage
#envvar lastName = Deighan
#for name in lNames
p My name is {name}
becomes
{#each lNames as name}
<p>
My name is {name}
</p>
{/each}
#starbucks webpage
#for name,i in lNames
p {i}. My name is {name}
becomes
{#each lNames as name,i}
<p>
{i}. My name is {name}
</p>
{/each}
#starbucks webpage
#for name,i in lNames (key = id)
p {i}. My name is {name}
becomes
{#each lNames as name,i (id)}
<p>
{i}. My name is {name}
</p>
{/each}
Command #await
#starbucks webpage
#await fetch('https://disease.sh/v3/covid-19/historical/all?lastdays=30')
p please wait...
#then lData
ul
#for n,i in lData
li [{i}] {n}
#catch err
div.error {err.message}
becomes
{#await fetch('https://disease.sh/v3/covid-19/historical/all?lastdays=30')}
<p>
please wait...
</p>
{:then lData}
<ul>
{#each lData as n,i}
<li>
[{i}] {n}
</li>
{/each}
</ul>
{:catch err}
<div class="error">
{err.message}
</div>
{/await}
Nested Styles (a la SASS)
#starbucks webpage
h1.error
p.message {err.message}
p.solution Please set env var dir_root
style
h1.error
p.message
background-color: red
p.solution
background-color: orange
becomes
<h1 class="error">
<p class="message">
{err.message}
</p>
<p class="solution">
Please set env var dir_root
</p>
</h1>
<style>
h1.error p.message {
background-color: red;
}
h1.error p.solution {
background-color: orange;
}
</style>
Attribute values = {...}
becomes