tailwind-web-components

butopen · Oct 25, 2022 · c82f0ae · c82f0ae
commit c82f0ae
Show file tree

Hide file tree

Showing 31 changed files with 1,761 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+.sass-cache/
+*.css.map
+*.sass.map
+*.scss.map
+dist
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,119 @@
+# Tailwind web component starter kit
+
+This is starter kit to develop web components with tailwind integrated in it. 
+
+Tailwind and web components do not play well together. Now they do.
+
+We managed to find a way to keep everything really really really simple.
+
+No dependencies, based on [lit-element](https://lit.dev/docs/).
+
+## How will you create a tailwind component?
+Here is a sample code:
+
+```typescript
+import {html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {TailwindElement} from '../shared/tailwind.element';
+
+import style from './test.component.scss'; // #1
+
+@customElement('test-component')
+export class TestComponent extends TailwindElement(style) { // #2
+
+  @property()
+  name?: string = 'World';
+
+  render() {
+    return html`
+      <p>
+        Hello,
+        <b>${this.name}</b>
+        !
+      </p>
+      <button class="bg-blue-200 text-yellow-200 p-2 rounded-full text-2xl">Hello world!</button>
+    `;
+  }
+}
+```
+It is based on the [lit element](https://lit.dev/docs/) technology.
+
+The only difference to a standard _LitElement_ is that:
+1) You must import your styles from a separate file. And this is good for two reasons:
+   - it separate the CSS from the logic
+   - you can decide to use CSS or SCSS
+2) the class extends a _TailwindElement_ rather than a LitElement
+
+A _TailwindElement_ extends a _LitElmement_ (see below) and adds the logic to integrate tailwind and your style.
+
+## Get started
+
+To run the project:
+1) `pnpm install` (only the first time)
+2) `pnpm start` to run the server
+3) to develop the library, run `pnpm build` and copy the static assets where you need them.
+
+You may clone this repo and start developing your components by looking at the _test.component_ as reference.
+
+As an alternative, and if you like to have control over every piece, do the following:
+
+1) copy the files in the shared folder: 
+   - _tailwind.element.ts_ extends LitElement by adding the tailwind support
+   - _tailwind.global.css_ includes tha Tailwind base classes into each component
+   - _globals.d.ts_ is used to avoid TypeScript errors whe nimporting CSS/Scss files in typescript files
+2) copy the _package.json_ or the devDependencies inside into your own _package.json_  (**there are no dependencies**)
+3) copy _postcss.config.js_, _tailwind.config.js_ and _tsconfig.js_ 
+
+That's all.
+
+
+
+
+## Show me the pieces
+If you want to understand how it works, it's simple:
+
+- the **package.json** integrates these technolgies:
+```json
+"autoprefixer": "^10.4.12",
+"postcss": "^8.4.18",
+"lit": "^2.4.0",
+"tailwindcss": "^3.2.0",
+"typescript": "^4.8.4",
+"vite": "^3.1.8",
+"sass": "^1.55.0"
+```
+
+- **vite** does almost all the work automatically
+- to integrate tailwind, the most important file is in _src/shared/tailwind.element.ts_
+
+```typescript
+import {LitElement, unsafeCSS} from "lit";
+
+import style from "./tailwind.global.css";
+
+const tailwindElement = unsafeCSS(style);
+
+export const TailwindElement = (style) =>
+    class extends LitElement {
+
+        static styles = [tailwindElement, unsafeCSS(style)];
+
+    };
+
+```
+
+It extends a _LitElement_ class at runtime and adds the component tailwind classes.
+
+The _style_ variable comes from your component, where it is imported from an external CSS (or SCSS) file.
+
+Then it is combined with the default tailwind classes.
+
+If you add more components, the common parts are reused.
+
+## Who uses it?
+
+We developed this starter kit to implement a web session player for our open source SaaS [browserbot](https://browserbot.io/).
+
+If you want to contribute or share soem thoughts, just get in touch with us.
+
+Enjoy.
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BrowserBot web components</title>
+</head>
+<body>
+<test-component name="Pippo"></test-component>
+<test2-component name="Pluto"></test2-component>
+<script type="module" src="src/test/test.component.ts"></script>
+<script type="module" src="src/test2/test2.component.ts"></script>
+</body>
+</html>
diff --git a/main/HEAD b/main/HEAD
@@ -0,0 +1 @@
+ref: refs/heads/master
diff --git a/main/config b/main/config
@@ -0,0 +1,6 @@
+[core]
+	repositoryformatversion = 0
+	filemode = false
+	bare = true
+	symlinks = false
+	ignorecase = true
diff --git a/main/description b/main/description
@@ -0,0 +1 @@
+Unnamed repository; edit this file 'description' to name the repository.
diff --git a/main/hooks/applypatch-msg.sample b/main/hooks/applypatch-msg.sample
@@ -0,0 +1,15 @@
+#!/bin/sh
+#
+# An example hook script to check the commit log message taken by
+# applypatch from an e-mail message.
+#
+# The hook should exit with non-zero status after issuing an
+# appropriate message if it wants to stop the commit.  The hook is
+# allowed to edit the commit message file.
+#
+# To enable this hook, rename this file to "applypatch-msg".
+
+. git-sh-setup
+commitmsg="$(git rev-parse --git-path hooks/commit-msg)"
+test -x "$commitmsg" && exec "$commitmsg" ${1+"$@"}
+:
diff --git a/main/hooks/commit-msg.sample b/main/hooks/commit-msg.sample
@@ -0,0 +1,24 @@
+#!/bin/sh
+#
+# An example hook script to check the commit log message.
+# Called by "git commit" with one argument, the name of the file
+# that has the commit message.  The hook should exit with non-zero
+# status after issuing an appropriate message if it wants to stop the
+# commit.  The hook is allowed to edit the commit message file.
+#
+# To enable this hook, rename this file to "commit-msg".
+
+# Uncomment the below to add a Signed-off-by line to the message.
+# Doing this in a hook is a bad idea in general, but the prepare-commit-msg
+# hook is more suited to it.
+#
+# SOB=$(git var GIT_AUTHOR_IDENT | sed -n 's/^\(.*>\).*$/Signed-off-by: \1/p')
+# grep -qs "^$SOB" "$1" || echo "$SOB" >> "$1"
+
+# This example catches duplicate Signed-off-by lines.
+
+test "" = "$(grep '^Signed-off-by: ' "$1" |
+	 sort | uniq -c | sed -e '/^[ 	]*1[ 	]/d')" || {
+	echo >&2 Duplicate Signed-off-by lines.
+	exit 1
+}
diff --git a/main/hooks/fsmonitor-watchman.sample b/main/hooks/fsmonitor-watchman.sample
@@ -0,0 +1,114 @@
+#!/usr/bin/perl
+
+use strict;
+use warnings;
+use IPC::Open2;
+
+# An example hook script to integrate Watchman
+# (https://facebook.github.io/watchman/) with git to speed up detecting
+# new and modified files.
+#
+# The hook is passed a version (currently 1) and a time in nanoseconds
+# formatted as a string and outputs to stdout all files that have been
+# modified since the given time. Paths must be relative to the root of
+# the working tree and separated by a single NUL.
+#
+# To enable this hook, rename this file to "query-watchman" and set
+# 'git config core.fsmonitor .git/hooks/query-watchman'
+#
+my ($version, $time) = @ARGV;
+
+# Check the hook interface version
+
+if ($version == 1) {
+	# convert nanoseconds to seconds
+	$time = int $time / 1000000000;
+} else {
+	die "Unsupported query-fsmonitor hook version '$version'.\n" .
+	    "Falling back to scanning...\n";
+}
+
+my $git_work_tree;
+if ($^O =~ 'msys' || $^O =~ 'cygwin') {
+	$git_work_tree = Win32::GetCwd();
+	$git_work_tree =~ tr/\\/\//;
+} else {
+	require Cwd;
+	$git_work_tree = Cwd::cwd();
+}
+
+my $retry = 1;
+
+launch_watchman();
+
+sub launch_watchman {
+
+	my $pid = open2(\*CHLD_OUT, \*CHLD_IN, 'watchman -j --no-pretty')
+	    or die "open2() failed: $!\n" .
+	    "Falling back to scanning...\n";
+
+	# In the query expression below we're asking for names of files that
+	# changed since $time but were not transient (ie created after
+	# $time but no longer exist).
+	#
+	# To accomplish this, we're using the "since" generator to use the
+	# recency index to select candidate nodes and "fields" to limit the
+	# output to file names only. Then we're using the "expression" term to
+	# further constrain the results.
+	#
+	# The category of transient files that we want to ignore will have a
+	# creation clock (cclock) newer than $time_t value and will also not
+	# currently exist.
+
+	my $query = <<"	END";
+		["query", "$git_work_tree", {
+			"since": $time,
+			"fields": ["name"],
+			"expression": ["not", ["allof", ["since", $time, "cclock"], ["not", "exists"]]]
+		}]
+	END
+
+	print CHLD_IN $query;
+	close CHLD_IN;
+	my $response = do {local $/; <CHLD_OUT>};
+
+	die "Watchman: command returned no output.\n" .
+	    "Falling back to scanning...\n" if $response eq "";
+	die "Watchman: command returned invalid output: $response\n" .
+	    "Falling back to scanning...\n" unless $response =~ /^\{/;
+
+	my $json_pkg;
+	eval {
+		require JSON::XS;
+		$json_pkg = "JSON::XS";
+		1;
+	} or do {
+		require JSON::PP;
+		$json_pkg = "JSON::PP";
+	};
+
+	my $o = $json_pkg->new->utf8->decode($response);
+
+	if ($retry > 0 and $o->{error} and $o->{error} =~ m/unable to resolve root .* directory (.*) is not watched/) {
+		print STDERR "Adding '$git_work_tree' to watchman's watch list.\n";
+		$retry--;
+		qx/watchman watch "$git_work_tree"/;
+		die "Failed to make watchman watch '$git_work_tree'.\n" .
+		    "Falling back to scanning...\n" if $? != 0;
+
+		# Watchman will always return all files on the first query so
+		# return the fast "everything is dirty" flag to git and do the
+		# Watchman query just to get it over with now so we won't pay
+		# the cost in git to look up each individual file.
+		print "/\0";
+		eval { launch_watchman() };
+		exit 0;
+	}
+
+	die "Watchman: $o->{error}.\n" .
+	    "Falling back to scanning...\n" if $o->{error};
+
+	binmode STDOUT, ":utf8";
+	local $, = "\0";
+	print @{$o->{files}};
+}
diff --git a/main/hooks/post-update.sample b/main/hooks/post-update.sample
@@ -0,0 +1,8 @@
+#!/bin/sh
+#
+# An example hook script to prepare a packed repository for use over
+# dumb transports.
+#
+# To enable this hook, rename this file to "post-update".
+
+exec git update-server-info
diff --git a/main/hooks/pre-applypatch.sample b/main/hooks/pre-applypatch.sample
@@ -0,0 +1,14 @@
+#!/bin/sh
+#
+# An example hook script to verify what is about to be committed
+# by applypatch from an e-mail message.
+#
+# The hook should exit with non-zero status after issuing an
+# appropriate message if it wants to stop the commit.
+#
+# To enable this hook, rename this file to "pre-applypatch".
+
+. git-sh-setup
+precommit="$(git rev-parse --git-path hooks/pre-commit)"
+test -x "$precommit" && exec "$precommit" ${1+"$@"}
+:
diff --git a/main/hooks/pre-commit.sample b/main/hooks/pre-commit.sample
@@ -0,0 +1,49 @@
+#!/bin/sh
+#
+# An example hook script to verify what is about to be committed.
+# Called by "git commit" with no arguments.  The hook should
+# exit with non-zero status after issuing an appropriate message if
+# it wants to stop the commit.
+#
+# To enable this hook, rename this file to "pre-commit".
+
+if git rev-parse --verify HEAD >/dev/null 2>&1
+then
+	against=HEAD
+else
+	# Initial commit: diff against an empty tree object
+	against=$(git hash-object -t tree /dev/null)
+fi
+
+# If you want to allow non-ASCII filenames set this variable to true.
+allownonascii=$(git config --bool hooks.allownonascii)
+
+# Redirect output to stderr.
+exec 1>&2
+
+# Cross platform projects tend to avoid non-ASCII filenames; prevent
+# them from being added to the repository. We exploit the fact that the
+# printable range starts at the space character and ends with tilde.
+if [ "$allownonascii" != "true" ] &&
+	# Note that the use of brackets around a tr range is ok here, (it's
+	# even required, for portability to Solaris 10's /usr/bin/tr), since
+	# the square bracket bytes happen to fall in the designated range.
+	test $(git diff --cached --name-only --diff-filter=A -z $against |
+	  LC_ALL=C tr -d '[ -~]\0' | wc -c) != 0
+then
+	cat <<\EOF
+Error: Attempt to add a non-ASCII file name.
+
+This can cause problems if you want to work with people on other platforms.
+
+To be portable it is advisable to rename the file.
+
+If you know what you are doing you can disable this check using:
+
+  git config hooks.allownonascii true
+EOF
+	exit 1
+fi
+
+# If there are whitespace errors, print the offending file names and fail.
+exec git diff-index --check --cached $against --
diff --git a/main/hooks/pre-merge-commit.sample b/main/hooks/pre-merge-commit.sample
@@ -0,0 +1,13 @@
+#!/bin/sh
+#
+# An example hook script to verify what is about to be committed.
+# Called by "git merge" with no arguments.  The hook should
+# exit with non-zero status after issuing an appropriate message to
+# stderr if it wants to stop the merge commit.
+#
+# To enable this hook, rename this file to "pre-merge-commit".
+
+. git-sh-setup
+test -x "$GIT_DIR/hooks/pre-commit" &&
+        exec "$GIT_DIR/hooks/pre-commit"
+:
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Unnamed repository; edit this file 'description' to name the repository.