From b88dbe0767a6d6cbd3d9f5a74f8bd3003f37dc0b Mon Sep 17 00:00:00 2001
From: Casper Engelmann <me@casperengelmann.com>
Date: Sat, 27 Aug 2022 23:37:18 +0200
Subject: [PATCH] feat(qwik): add component-composition/slot (#115)

* fix(qwik): typescript eslint parser

* feat(qwik): add funny button example
---
 .../3-slot/qwik/App.tsx                       |  5 ++++
 .../3-slot/qwik/FunnyButton.tsx               | 24 +++++++++++++++++++
 src/frameworks.mjs                            | 12 +++++-----
 3 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 content/4-component-composition/3-slot/qwik/App.tsx
 create mode 100644 content/4-component-composition/3-slot/qwik/FunnyButton.tsx

diff --git a/content/4-component-composition/3-slot/qwik/App.tsx b/content/4-component-composition/3-slot/qwik/App.tsx
new file mode 100644
index 0000000..e90a6f6
--- /dev/null
+++ b/content/4-component-composition/3-slot/qwik/App.tsx
@@ -0,0 +1,5 @@
+import FunnyButton from './FunnyButton';
+
+export default function App() {
+	return <FunnyButton>Click me !</FunnyButton>;
+}
diff --git a/content/4-component-composition/3-slot/qwik/FunnyButton.tsx b/content/4-component-composition/3-slot/qwik/FunnyButton.tsx
new file mode 100644
index 0000000..385884b
--- /dev/null
+++ b/content/4-component-composition/3-slot/qwik/FunnyButton.tsx
@@ -0,0 +1,24 @@
+import { component$, Slot } from '@builder.io/qwik';
+
+const FunnyButton = component$(() => {
+	return (
+		<button
+			style={{
+				background: 'rgba(0, 0, 0, 0.4)',
+				color: '#fff',
+				padding: '10px 20px',
+				fontSize: '30px',
+				border: '2px solid #fff',
+				margin: '8px',
+				transform: 'scale(0.9)',
+				boxShadow: '4px 4px rgba(0, 0, 0, 0.4)',
+				transition: 'transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s',
+				outline: '0',
+			}}
+		>
+			<Slot />
+		</button>
+	);
+});
+
+export default FunnyButton;
diff --git a/src/frameworks.mjs b/src/frameworks.mjs
index 180c817..2c7b214 100644
--- a/src/frameworks.mjs
+++ b/src/frameworks.mjs
@@ -175,17 +175,17 @@ export default [
 				es2021: true,
 				node: true,
 			},
+			parser: '@typescript-eslint/parser',
 			parserOptions: {
 				ecmaFeatures: {
-				  jsx: true,
+					jsx: true,
 				},
-			  },
+			},
 			files: ['**/qwik/**'],
-			extends: ['eslint:recommended',
-			'plugin:qwik/recommended'],
+			extends: ['eslint:recommended', 'plugin:qwik/recommended'],
 			rules: {
-				'qwik/valid-lexical-scope': 'off'
-			}
+				'qwik/valid-lexical-scope': 'off',
+			},
 		},
 		playgroundURL: 'https://qwik.builder.io/playground',
 		documentationURL: 'https://qwik.builder.io/docs/overview',