Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

@jdeighan/starbucks

Package Overview
Dependencies
Maintainers
1
Versions
146
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@jdeighan/starbucks

A svelte language extension

latest
Source
npmnpm
Version
10.0.4
Version published
Maintainers
1
Created
Source

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

Keywords

svelte

FAQs

Package last updated on 17 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts