feat(qwik): add component-composition/slot (#115)

* fix(qwik): typescript eslint parser

* feat(qwik): add funny button example

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>;
+}

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;

src/frameworks.mjs

@@ -175,17 +175,17 @@ export default [
 				es2021: true,
 				node: true,
 			},
+			parser: '@typescript-eslint/parser',
 			parserOptions: {
 				ecmaFeatures: {
 					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',