├── app ├── apps │ ├── npm │ ├── web │ │ ├── src │ │ │ ├── env.d.ts │ │ │ ├── components │ │ │ │ ├── Svelte.svelte │ │ │ │ ├── Preact.tsx │ │ │ │ ├── React.tsx │ │ │ │ ├── Vue.vue │ │ │ │ └── Solid.tsx │ │ │ ├── layouts │ │ │ │ └── Layout.astro │ │ │ └── pages │ │ │ │ └── index.astro │ │ ├── tsconfig.json │ │ ├── .vscode │ │ │ ├── extensions.json │ │ │ └── launch.json │ │ ├── tailwind.config.cjs │ │ ├── .gitignore │ │ ├── astro.config.mjs │ │ ├── package.json │ │ └── public │ │ │ └── favicon.svg │ └── docs │ │ ├── .eslintrc.js │ │ ├── next.config.js │ │ ├── tsconfig.json │ │ ├── pages │ │ └── index.tsx │ │ ├── next-env.d.ts │ │ ├── package.json │ │ └── README.md ├── packages │ ├── ui │ │ ├── index.tsx │ │ ├── Button.tsx │ │ ├── tsconfig.json │ │ └── package.json │ ├── tsconfig │ │ ├── README.md │ │ ├── package.json │ │ ├── react-library.json │ │ ├── base.json │ │ └── nextjs.json │ └── eslint-config-custom │ │ ├── index.js │ │ └── package.json ├── .eslintrc.js ├── turbo.json ├── .gitignore └── package.json ├── angular ├── src │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── app │ │ ├── html │ │ │ └── html.component.ts │ │ ├── hello-world │ │ │ └── hello-world.component.ts │ │ ├── nesting-components │ │ │ ├── nested-component │ │ │ │ └── nested-component.component.ts │ │ │ └── nesting-components.component.ts │ │ ├── props │ │ │ ├── props.component.ts │ │ │ └── nested │ │ │ │ └── nested.component.ts │ │ ├── page-content │ │ │ ├── page-content.component.ts │ │ │ ├── page-content.component.css │ │ │ ├── page-content.component.html │ │ │ └── page-content.component.spec.ts │ │ ├── styling │ │ │ └── styling.component.ts │ │ ├── app.component.spec.ts │ │ ├── dependent-variables │ │ │ └── dependent-variables.component.ts │ │ ├── basic-variables │ │ │ └── basic-variables.component.ts │ │ ├── conditional-rendering │ │ │ └── conditional-rendering.component.ts │ │ ├── navbar │ │ │ ├── navbar.component.html │ │ │ ├── navbar.component.spec.ts │ │ │ └── navbar.component.css │ │ ├── list-looping │ │ │ └── list-looping.component.ts │ │ └── components-map.ts │ ├── styles.css │ ├── index.html │ ├── main.ts │ └── test.ts ├── .editorconfig ├── tsconfig.app.json ├── tsconfig.spec.json ├── .browserslistrc ├── .gitignore ├── tsconfig.json ├── README.md └── package.json ├── components ├── .gitignore ├── .eslintignore ├── .prettierignore ├── .prettierrc ├── output │ ├── svelte │ │ └── src │ │ │ └── components │ │ │ └── HelloWorld.svelte │ ├── solid │ │ └── src │ │ │ └── components │ │ │ └── HelloWorld.jsx │ ├── vue │ │ └── vue3 │ │ │ └── src │ │ │ └── components │ │ │ └── HelloWorld.vue │ └── react │ │ └── src │ │ └── components │ │ └── HelloWorld.jsx ├── mitosis.config.js ├── overrides │ ├── react-native │ │ └── src │ │ │ ├── functions │ │ │ └── is-react-native.ts │ │ │ ├── index-helpers │ │ │ └── top-of-file.ts │ │ │ ├── components │ │ │ └── error-boundary.tsx │ │ │ └── blocks │ │ │ └── image.tsx │ └── vue │ │ └── src │ │ └── components │ │ └── error-boundary.vue ├── src │ └── HelloWorld.lite.tsx ├── tailwind.config.js ├── jest.config.js ├── tsconfig.json ├── .eslintrc.js ├── package.json └── README.md ├── solid ├── .gitignore ├── src │ ├── components │ │ ├── HTML │ │ │ ├── index.ts │ │ │ └── HTML.tsx │ │ ├── Props │ │ │ ├── index.ts │ │ │ ├── Props.tsx │ │ │ └── Nested.tsx │ │ ├── Styling │ │ │ ├── index.ts │ │ │ └── Styling.tsx │ │ ├── HelloWorld │ │ │ ├── index.ts │ │ │ └── HelloWorld.tsx │ │ ├── ListLooping │ │ │ ├── index.ts │ │ │ └── ListLooping.tsx │ │ ├── BasicVariables │ │ │ ├── index.ts │ │ │ └── BasicVariables.tsx │ │ ├── Custom │ │ │ └── SolidTyper │ │ │ │ ├── index.ts │ │ │ │ └── styles.css │ │ ├── NestingComponents │ │ │ ├── index.ts │ │ │ ├── Nested.tsx │ │ │ └── NestingComponents.tsx │ │ ├── DependentVariables │ │ │ ├── index.ts │ │ │ └── DependentVariables.tsx │ │ ├── ConditionalRendering │ │ │ ├── index.ts │ │ │ └── ConditionalRendering.tsx │ │ └── index.ts │ ├── sections │ │ ├── Navbar │ │ │ ├── index.ts │ │ │ └── Navbar.module.css │ │ ├── PageContent │ │ │ ├── index.ts │ │ │ └── PageContent.module.css │ │ └── index.ts │ ├── containers │ │ ├── RainbowTypewriter │ │ │ ├── index.ts │ │ │ └── RainbowTypewriter.tsx │ │ ├── SentenceTypewriter │ │ │ ├── index.ts │ │ │ └── SentenceTypewriter.tsx │ │ └── index.ts │ ├── App.module.css │ ├── assets │ │ └── favicon.ico │ ├── index.tsx │ └── index.css ├── vite.config.ts ├── tsconfig.json ├── package.json ├── index.html └── README.md ├── svelte ├── .npmrc ├── src │ ├── components │ │ ├── HTML │ │ │ ├── index.ts │ │ │ └── HTML.svelte │ │ ├── Props │ │ │ ├── index.ts │ │ │ ├── Props.svelte │ │ │ └── Nested.svelte │ │ ├── Styling │ │ │ ├── index.ts │ │ │ └── Styling.svelte │ │ ├── HelloWorld │ │ │ ├── index.ts │ │ │ └── HelloWorld.svelte │ │ ├── NestingComponents │ │ │ ├── Nested.svelte │ │ │ ├── index.ts │ │ │ └── NestingComponents.svelte │ │ ├── ListLooping │ │ │ ├── index.ts │ │ │ └── ListLooping.svelte │ │ ├── BasicVariables │ │ │ ├── index.ts │ │ │ └── BasicVariables.svelte │ │ ├── DependentVariables │ │ │ ├── index.ts │ │ │ └── DependentVariables.svelte │ │ └── ConditionalRendering │ │ │ ├── index.ts │ │ │ └── ConditionalRendering.svelte │ ├── app.d.ts │ └── app.html ├── static │ └── favicon.png ├── .gitignore ├── .prettierrc ├── svelte.config.js ├── tsconfig.json ├── package.json └── README.md ├── web ├── src │ ├── components │ │ ├── solid │ │ │ ├── Props.jsx │ │ │ ├── HTML.jsx │ │ │ ├── HelloWorld.jsx │ │ │ ├── Styling.jsx │ │ │ ├── BasicVariables.jsx │ │ │ ├── ConditionalRendering.jsx │ │ │ ├── DependentVariables.jsx │ │ │ └── ListLooping.jsx │ │ ├── astro │ │ │ ├── HelloWorld.astro │ │ │ ├── Styling.astro │ │ │ ├── HTML.astro │ │ │ ├── Props.astro │ │ │ └── AstroComponents.astro │ │ ├── svelte │ │ │ ├── HelloWorld.svelte │ │ │ ├── Props.svelte │ │ │ ├── HTML.svelte │ │ │ ├── Styling.svelte │ │ │ ├── BasicVariables.svelte │ │ │ ├── ConditionalRendering.svelte │ │ │ ├── DependentVariables.svelte │ │ │ ├── ListLooping.svelte │ │ │ └── SvelteComponents.svelte │ │ ├── vue │ │ │ ├── HTML.vue │ │ │ ├── HelloWorld.vue │ │ │ ├── Props.vue │ │ │ ├── Styling.vue │ │ │ ├── BasicVariables.vue │ │ │ ├── ConditionalRendering.vue │ │ │ ├── DependentVariables.vue │ │ │ └── ListLooping.vue │ │ ├── react │ │ │ ├── HelloWorld.jsx │ │ │ ├── Props.jsx │ │ │ ├── HTML.jsx │ │ │ ├── Styling.jsx │ │ │ ├── BasicVariables.jsx │ │ │ ├── ConditionalRendering.jsx │ │ │ ├── ListLooping.jsx │ │ │ ├── DependentVariables.jsx │ │ │ └── ReactComponents.jsx │ │ ├── preact │ │ │ ├── HelloWorld.jsx │ │ │ ├── Props.jsx │ │ │ ├── HTML.jsx │ │ │ ├── Styling.jsx │ │ │ ├── BasicVariables.jsx │ │ │ ├── ConditionalRendering.jsx │ │ │ ├── ListLooping.jsx │ │ │ ├── DependentVariables.jsx │ │ │ └── PreactComponents.jsx │ │ ├── lit │ │ │ ├── HelloWorld.ts │ │ │ ├── HTML.ts │ │ │ ├── Props.ts │ │ │ ├── ListLooping.ts │ │ │ ├── Styling.ts │ │ │ ├── ConditionalRendering.ts │ │ │ ├── DependentVariables.ts │ │ │ ├── LitComponents.ts │ │ │ └── BasicVariables.ts │ │ ├── Logo.astro │ │ └── FileReader.astro │ ├── env.d.ts │ ├── utils │ │ └── helpers.ts │ ├── pages │ │ ├── lit │ │ │ └── [id].astro │ │ ├── vue │ │ │ └── [id].astro │ │ ├── react │ │ │ └── [id].astro │ │ ├── solid │ │ │ └── [id].astro │ │ ├── preact │ │ │ └── [id].astro │ │ ├── svelte │ │ │ └── [id].astro │ │ ├── astro │ │ │ └── [id].astro │ │ ├── 404.astro │ │ └── index.astro │ └── layouts │ │ └── Layout.astro ├── tsconfig.json ├── prettier.config.cjs ├── public │ ├── logos │ │ ├── preact-logo.png │ │ ├── react-icon.svg │ │ ├── vue-icon.svg │ │ └── lit-icon.svg │ ├── favicon.svg │ └── astro.json ├── .vscode │ ├── extensions.json │ ├── settings.json │ └── launch.json ├── .gitignore ├── astro.config.mjs ├── tailwind.config.cjs └── package.json ├── qwik ├── src │ ├── layouts │ │ ├── not-found │ │ │ ├── not-found.css │ │ │ └── not-found.tsx │ │ └── default │ │ │ └── default.css │ ├── components │ │ ├── Props │ │ │ ├── index.ts │ │ │ ├── Props.tsx │ │ │ └── Child.tsx │ │ ├── Styling │ │ │ ├── index.ts │ │ │ ├── Styling.css │ │ │ └── Styling.tsx │ │ ├── HelloWorld │ │ │ ├── index.ts │ │ │ ├── Child.tsx │ │ │ └── HelloWorld.tsx │ │ ├── ListLooping │ │ │ ├── index.ts │ │ │ └── ListLooping.tsx │ │ ├── BasicVariables │ │ │ ├── index.ts │ │ │ └── BasicVariables.tsx │ │ ├── NestingComponents │ │ │ ├── index.ts │ │ │ ├── NestingComponents.css │ │ │ ├── Nested.tsx │ │ │ └── NestingComponents.tsx │ │ ├── ConditionalRendering │ │ │ ├── index.ts │ │ │ └── ConditionalRendering.tsx │ │ ├── DependentVariables │ │ │ ├── index.ts │ │ │ └── DependentVariables.tsx │ │ ├── footer │ │ │ ├── footer.css │ │ │ └── footer.tsx │ │ ├── header │ │ │ ├── header.css │ │ │ └── header.tsx │ │ ├── app │ │ │ └── app.tsx │ │ ├── index.ts │ │ ├── page │ │ │ └── page.tsx │ │ └── sidebar │ │ │ └── sidebar.css │ ├── sections │ │ ├── Navbar │ │ │ ├── index.ts │ │ │ └── Navbar.css │ │ ├── PageContent │ │ │ ├── index.ts │ │ │ └── PageContent.css │ │ └── index.ts │ ├── global.css │ ├── pages │ │ ├── INDEX │ │ └── index.mdx │ ├── entry.ssr.tsx │ ├── entry.dev.tsx │ └── root.tsx ├── public │ ├── _headers │ ├── favicon.ico │ └── favicons │ │ ├── apple-touch-icon.png │ │ ├── android-chrome-192x192.png │ │ └── android-chrome-256x256.png ├── .prettierignore ├── .eslintignore ├── .gitignore ├── tsconfig.json ├── vite.config.ts ├── .eslintrc.js └── package.json ├── react ├── src │ ├── vite-env.d.ts │ ├── components │ │ ├── Custom │ │ │ ├── ReactTyper │ │ │ │ ├── index.ts │ │ │ │ └── styles.module.css │ │ │ └── Examples │ │ │ │ └── RainbowTypewriter │ │ │ │ ├── index.ts │ │ │ │ └── RainbowTypewriter.tsx │ │ ├── HTML.tsx │ │ ├── HelloWorld.tsx │ │ ├── Styling.tsx │ │ ├── Props.tsx │ │ ├── BasicVariables.tsx │ │ ├── ConditionalRendering.tsx │ │ ├── NestingComponents.tsx │ │ ├── index.ts │ │ ├── ListLooping.tsx │ │ └── DependentVariables.tsx │ └── main.tsx ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json └── public │ └── vite.svg ├── react-next ├── src │ ├── components │ │ ├── HTML │ │ │ ├── index.ts │ │ │ └── HTML.tsx │ │ ├── Props │ │ │ ├── index.ts │ │ │ ├── Props.tsx │ │ │ └── Nested.tsx │ │ ├── Styling │ │ │ ├── index.ts │ │ │ └── Styling.tsx │ │ ├── HelloWorld │ │ │ ├── index.ts │ │ │ └── HelloWorld.tsx │ │ ├── ListLooping │ │ │ ├── index.ts │ │ │ └── ListLooping.tsx │ │ ├── BasicVariables │ │ │ ├── index.ts │ │ │ └── BasicVariables.tsx │ │ ├── Custom │ │ │ ├── ReactTyper │ │ │ │ ├── index.ts │ │ │ │ └── styles.module.css │ │ │ └── Examples │ │ │ │ └── RainbowTypewriter │ │ │ │ ├── index.ts │ │ │ │ └── RainbowTypewriter.tsx │ │ ├── NestingComponents │ │ │ ├── index.ts │ │ │ ├── Nested.tsx │ │ │ └── NestingComponents.tsx │ │ ├── DependentVariables │ │ │ ├── index.ts │ │ │ └── DependentVariables.tsx │ │ ├── ConditionalRendering │ │ │ ├── index.ts │ │ │ └── ConditionalRendering.tsx │ │ └── index.ts │ └── sections │ │ ├── Navbar │ │ ├── index.ts │ │ └── Navbar.module.css │ │ ├── PageContent │ │ ├── index.ts │ │ └── PageContent.module.css │ │ └── index.ts ├── .eslintrc.json ├── styles │ ├── HomePage.module.css │ └── globals.css ├── public │ ├── favicon.ico │ └── vercel.svg ├── next.config.js ├── next-env.d.ts ├── pages │ └── _app.tsx ├── .gitignore ├── tsconfig.json └── package.json ├── vue ├── .vscode │ └── extensions.json ├── src │ ├── components │ │ ├── child │ │ │ ├── Unstyled.vue │ │ │ └── CustomAnswer.vue │ │ ├── HelloWorld.vue │ │ ├── Styling.vue │ │ ├── BasicVariables.vue │ │ ├── Props.vue │ │ ├── ConditionalRendering.vue │ │ ├── NestingComponents.vue │ │ ├── DependentVariables.vue │ │ └── ListLooping.vue │ ├── main.ts │ ├── vite-env.d.ts │ └── assets │ │ └── vue.svg ├── vite.config.ts ├── tsconfig.node.json ├── .gitignore ├── index.html ├── package.json ├── tsconfig.json ├── README.md └── public │ └── vite.svg ├── vue-nuxt ├── app.vue ├── .gitignore ├── components │ ├── Nested │ │ ├── Nested.vue │ │ └── Nested2.vue │ ├── HelloWorld.vue │ ├── Styling.vue │ ├── Props.vue │ ├── BasicVariables.vue │ ├── ConditionalRendering.vue │ ├── NestingComponents.vue │ ├── DependentVariables.vue │ └── ListLooping.vue ├── nuxt.config.ts ├── tsconfig.json ├── package.json ├── sections │ ├── Navbar.vue │ └── PageContent.vue └── README.md ├── .gitignore └── README.md /app/apps/npm: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /angular/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /solid/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /svelte/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /web/src/components/solid/Props.jsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /qwik/src/layouts/not-found/not-found.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | output/ 3 | -------------------------------------------------------------------------------- /components/.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | output 3 | -------------------------------------------------------------------------------- /web/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /app/apps/web/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /solid/src/components/HTML/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './HTML'; -------------------------------------------------------------------------------- /web/src/components/astro/HelloWorld.astro: -------------------------------------------------------------------------------- 1 |

Hello world!

2 | -------------------------------------------------------------------------------- /web/src/components/svelte/HelloWorld.svelte: -------------------------------------------------------------------------------- 1 |

Hello world!

2 | -------------------------------------------------------------------------------- /app/apps/web/src/components/Svelte.svelte: -------------------------------------------------------------------------------- 1 |
Hello from Svelte
-------------------------------------------------------------------------------- /qwik/src/components/Props/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Props"; 2 | -------------------------------------------------------------------------------- /qwik/src/sections/Navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Navbar"; 2 | -------------------------------------------------------------------------------- /react-next/src/components/HTML/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './HTML'; -------------------------------------------------------------------------------- /solid/src/components/Props/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Props'; -------------------------------------------------------------------------------- /solid/src/components/Styling/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Styling'; -------------------------------------------------------------------------------- /web/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strictest" 3 | } -------------------------------------------------------------------------------- /app/apps/web/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strictest" 3 | } -------------------------------------------------------------------------------- /qwik/src/components/Styling/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Styling"; 2 | -------------------------------------------------------------------------------- /react-next/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /react-next/src/components/Props/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Props'; -------------------------------------------------------------------------------- /react-next/src/components/Styling/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Styling'; -------------------------------------------------------------------------------- /solid/src/sections/Navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Navbar"; 2 | -------------------------------------------------------------------------------- /svelte/src/components/HTML/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './HTML.svelte'; -------------------------------------------------------------------------------- /svelte/src/components/Props/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Props.svelte'; -------------------------------------------------------------------------------- /vue/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /components/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /qwik/src/components/HelloWorld/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./HelloWorld"; 2 | -------------------------------------------------------------------------------- /qwik/src/sections/PageContent/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./PageContent"; 2 | -------------------------------------------------------------------------------- /react-next/src/sections/Navbar/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Navbar"; 2 | -------------------------------------------------------------------------------- /solid/src/components/HelloWorld/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './HelloWorld'; -------------------------------------------------------------------------------- /solid/src/components/ListLooping/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ListLooping'; -------------------------------------------------------------------------------- /svelte/src/components/Styling/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './Styling.svelte'; -------------------------------------------------------------------------------- /qwik/src/components/ListLooping/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./ListLooping"; 2 | -------------------------------------------------------------------------------- /react-next/src/components/HelloWorld/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './HelloWorld'; -------------------------------------------------------------------------------- /react-next/src/components/ListLooping/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ListLooping'; -------------------------------------------------------------------------------- /react/src/components/Custom/ReactTyper/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ReactTyper'; -------------------------------------------------------------------------------- /solid/src/components/BasicVariables/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './BasicVariables'; -------------------------------------------------------------------------------- /solid/src/components/Custom/SolidTyper/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './SolidTyper'; -------------------------------------------------------------------------------- /solid/src/sections/PageContent/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./PageContent"; 2 | -------------------------------------------------------------------------------- /svelte/src/components/HelloWorld/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './HelloWorld.svelte'; -------------------------------------------------------------------------------- /svelte/src/components/NestingComponents/Nested.svelte: -------------------------------------------------------------------------------- 1 |

...don't affect this element

-------------------------------------------------------------------------------- /web/src/components/vue/HTML.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/packages/ui/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | export * from "./Button"; 3 | -------------------------------------------------------------------------------- /qwik/src/components/BasicVariables/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./BasicVariables"; 2 | -------------------------------------------------------------------------------- /react-next/src/components/BasicVariables/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './BasicVariables'; -------------------------------------------------------------------------------- /react-next/src/components/Custom/ReactTyper/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ReactTyper'; -------------------------------------------------------------------------------- /react-next/src/sections/PageContent/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./PageContent"; 2 | -------------------------------------------------------------------------------- /solid/src/components/NestingComponents/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './NestingComponents'; -------------------------------------------------------------------------------- /solid/src/containers/RainbowTypewriter/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './RainbowTypewriter'; -------------------------------------------------------------------------------- /svelte/src/components/ListLooping/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ListLooping.svelte'; -------------------------------------------------------------------------------- /vue-nuxt/app.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /qwik/src/components/NestingComponents/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./NestingComponents"; 2 | -------------------------------------------------------------------------------- /react-next/src/components/NestingComponents/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './NestingComponents'; -------------------------------------------------------------------------------- /solid/src/components/DependentVariables/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './DependentVariables'; -------------------------------------------------------------------------------- /solid/src/containers/SentenceTypewriter/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './SentenceTypewriter'; -------------------------------------------------------------------------------- /svelte/src/components/BasicVariables/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './BasicVariables.svelte'; -------------------------------------------------------------------------------- /vue-nuxt/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log* 3 | .nuxt 4 | .nitro 5 | .cache 6 | .output 7 | .env -------------------------------------------------------------------------------- /web/src/components/vue/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /app/apps/docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ["custom"], 4 | }; 5 | -------------------------------------------------------------------------------- /qwik/src/components/ConditionalRendering/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./ConditionalRendering"; 2 | -------------------------------------------------------------------------------- /qwik/src/components/DependentVariables/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./DependentVariables"; 2 | -------------------------------------------------------------------------------- /react-next/src/components/DependentVariables/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './DependentVariables'; -------------------------------------------------------------------------------- /solid/src/components/ConditionalRendering/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ConditionalRendering'; -------------------------------------------------------------------------------- /svelte/src/components/DependentVariables/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './DependentVariables.svelte'; -------------------------------------------------------------------------------- /svelte/src/components/NestingComponents/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './NestingComponents.svelte'; -------------------------------------------------------------------------------- /angular/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /react-next/src/components/ConditionalRendering/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ConditionalRendering'; -------------------------------------------------------------------------------- /solid/src/App.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | width: 100vw; 4 | height: 100vh; 5 | } -------------------------------------------------------------------------------- /svelte/src/components/ConditionalRendering/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './ConditionalRendering.svelte'; -------------------------------------------------------------------------------- /vue-nuxt/components/Nested/Nested.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vue/src/components/child/Unstyled.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /angular/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StillScripts/web-frameworks/HEAD/angular/src/favicon.ico -------------------------------------------------------------------------------- /qwik/public/_headers: -------------------------------------------------------------------------------- 1 | /build/* 2 | Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable 3 | -------------------------------------------------------------------------------- /qwik/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StillScripts/web-frameworks/HEAD/qwik/public/favicon.ico -------------------------------------------------------------------------------- /svelte/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StillScripts/web-frameworks/HEAD/svelte/static/favicon.png -------------------------------------------------------------------------------- /web/src/components/solid/HTML.jsx: -------------------------------------------------------------------------------- 1 | const HTML = () =>

To be determined

2 | 3 | export default HTML 4 | -------------------------------------------------------------------------------- /components/output/svelte/src/components/HelloWorld.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 |
Hello World!
5 | -------------------------------------------------------------------------------- /qwik/src/layouts/default/default.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | width: 100vw; 4 | height: 100vh; 5 | } -------------------------------------------------------------------------------- /react-next/styles/HomePage.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | width: 100vw; 4 | height: 100vh; 5 | } -------------------------------------------------------------------------------- /react/src/components/Custom/Examples/RainbowTypewriter/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./RainbowTypewriter"; 2 | -------------------------------------------------------------------------------- /app/apps/web/src/components/Preact.tsx: -------------------------------------------------------------------------------- 1 | export default function Preact() { 2 | return
Hello from Preact
; 3 | } -------------------------------------------------------------------------------- /app/apps/web/src/components/React.tsx: -------------------------------------------------------------------------------- 1 | export default function Hello() { 2 | return
Hello from React
; 3 | } 4 | -------------------------------------------------------------------------------- /react-next/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StillScripts/web-frameworks/HEAD/react-next/public/favicon.ico -------------------------------------------------------------------------------- /react-next/src/components/Custom/Examples/RainbowTypewriter/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./RainbowTypewriter"; 2 | -------------------------------------------------------------------------------- /solid/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StillScripts/web-frameworks/HEAD/solid/src/assets/favicon.ico -------------------------------------------------------------------------------- /web/prettier.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('prettier-plugin-tailwindcss')], 3 | semi: false, 4 | } -------------------------------------------------------------------------------- /svelte/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | -------------------------------------------------------------------------------- /web/public/logos/preact-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StillScripts/web-frameworks/HEAD/web/public/logos/preact-logo.png -------------------------------------------------------------------------------- /components/mitosis.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | files: 'src/**', 3 | targets: ['vue3', 'solid', 'svelte', 'react'], 4 | }; -------------------------------------------------------------------------------- /svelte/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /web/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [], 4 | } 5 | -------------------------------------------------------------------------------- /web/src/utils/helpers.ts: -------------------------------------------------------------------------------- 1 | export function classNames(...classes: string[]) { 2 | return classes.filter(Boolean).join(" ") 3 | } 4 | -------------------------------------------------------------------------------- /components/overrides/react-native/src/functions/is-react-native.ts: -------------------------------------------------------------------------------- 1 | export function isReactNative(): boolean { 2 | return true; 3 | } 4 | -------------------------------------------------------------------------------- /qwik/src/sections/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Navbar } from "./Navbar"; 2 | export { default as PageContent } from "./PageContent"; 3 | -------------------------------------------------------------------------------- /react-next/src/sections/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Navbar } from './Navbar'; 2 | export { default as PageContent } from './PageContent'; -------------------------------------------------------------------------------- /solid/src/sections/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Navbar } from "./Navbar"; 2 | export { default as PageContent } from "./PageContent"; 3 | -------------------------------------------------------------------------------- /web/src/components/svelte/Props.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /app/apps/web/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /app/packages/ui/Button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | export const Button = () => { 3 | return ; 4 | }; 5 | -------------------------------------------------------------------------------- /qwik/src/components/Styling/Styling.css: -------------------------------------------------------------------------------- 1 | .styled { 2 | color: purple; 3 | font-family: 'Comic Sans MS', cursive; 4 | font-size: 2em; 5 | } -------------------------------------------------------------------------------- /svelte/src/components/HelloWorld/HelloWorld.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Hello {name}!

6 | -------------------------------------------------------------------------------- /qwik/public/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StillScripts/web-frameworks/HEAD/qwik/public/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /vue/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /web/src/components/astro/Styling.astro: -------------------------------------------------------------------------------- 1 |

2 | Styled! 3 |

4 | -------------------------------------------------------------------------------- /web/src/components/svelte/HTML.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{@html string}

-------------------------------------------------------------------------------- /app/packages/tsconfig/README.md: -------------------------------------------------------------------------------- 1 | # `tsconfig` 2 | 3 | These are base shared `tsconfig.json`s from which all other `tsconfig.json`'s inherit from. 4 | -------------------------------------------------------------------------------- /components/output/solid/src/components/HelloWorld.jsx: -------------------------------------------------------------------------------- 1 | function Hello(props) { 2 | return
Hello World!
; 3 | } 4 | 5 | export default Hello; -------------------------------------------------------------------------------- /components/src/HelloWorld.lite.tsx: -------------------------------------------------------------------------------- 1 | export default function Hello() { 2 | return ( 3 |
4 | Hello World! 5 |
6 | ); 7 | } -------------------------------------------------------------------------------- /web/src/components/astro/HTML.astro: -------------------------------------------------------------------------------- 1 | --- 2 | const htmlString = `here's some HTML!!!` 3 | --- 4 | 5 |

6 | -------------------------------------------------------------------------------- /web/src/components/solid/HelloWorld.jsx: -------------------------------------------------------------------------------- 1 | import "solid-js" 2 | 3 | const HelloWorld = () =>

Hello world!

4 | 5 | export default HelloWorld 6 | -------------------------------------------------------------------------------- /qwik/public/favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StillScripts/web-frameworks/HEAD/qwik/public/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /qwik/public/favicons/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/StillScripts/web-frameworks/HEAD/qwik/public/favicons/android-chrome-256x256.png -------------------------------------------------------------------------------- /qwik/src/components/NestingComponents/NestingComponents.css: -------------------------------------------------------------------------------- 1 | .text { 2 | color: purple; 3 | font-family: 'Comic Sans MS', cursive; 4 | font-size: 2em; 5 | } -------------------------------------------------------------------------------- /qwik/src/components/footer/footer.css: -------------------------------------------------------------------------------- 1 | .docs footer nav a { 2 | @apply text-slate-600; 3 | @apply no-underline; 4 | @apply hover:underline; 5 | } 6 | -------------------------------------------------------------------------------- /qwik/src/components/header/header.css: -------------------------------------------------------------------------------- 1 | header { 2 | background: #1474ff; 3 | padding: 30px; 4 | color: rgb(37, 33, 151); 5 | font-weight: 600; 6 | } 7 | -------------------------------------------------------------------------------- /web/src/components/react/HelloWorld.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const HelloWorld = () =>

Hello world!

4 | 5 | export default HelloWorld 6 | -------------------------------------------------------------------------------- /app/apps/docs/next.config.js: -------------------------------------------------------------------------------- 1 | const withTM = require("next-transpile-modules")(["ui"]); 2 | 3 | module.exports = withTM({ 4 | reactStrictMode: true, 5 | }); 6 | -------------------------------------------------------------------------------- /react-next/src/components/NestingComponents/Nested.tsx: -------------------------------------------------------------------------------- 1 | const Nested: React.FC = () =>

{`...don't affect this element`}

; 2 | 3 | export default Nested; 4 | -------------------------------------------------------------------------------- /svelte/src/components/HTML/HTML.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{@html string}

-------------------------------------------------------------------------------- /svelte/src/components/Props/Props.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /web/src/components/preact/HelloWorld.jsx: -------------------------------------------------------------------------------- 1 | import { h } from "preact" 2 | 3 | const HelloWorld = () =>

Hello world!

4 | 5 | export default HelloWorld 6 | -------------------------------------------------------------------------------- /app/packages/ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/react-library.json", 3 | "include": ["."], 4 | "exclude": ["dist", "build", "node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /react-next/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /svelte/src/components/Props/Nested.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

The answer is {answer}

-------------------------------------------------------------------------------- /app/apps/docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tsconfig/nextjs.json", 3 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 4 | "exclude": ["node_modules"] 5 | } 6 | -------------------------------------------------------------------------------- /solid/src/containers/index.ts: -------------------------------------------------------------------------------- 1 | export { default as RainbowTypewriter } from './RainbowTypewriter'; 2 | export { default as SentenceTypewriter } from './SentenceTypewriter'; -------------------------------------------------------------------------------- /web/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.documentSelectors": ["**/*.astro"], 3 | "[astro]": { 4 | "editor.defaultFormatter": "esbenp.prettier-vscode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /web/src/components/react/Props.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const Props = ({ answer = "a mystery" }) =>

The answer is {answer}

4 | 5 | export default Props 6 | -------------------------------------------------------------------------------- /vue-nuxt/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtConfig } from 'nuxt' 2 | 3 | // https://v3.nuxtjs.org/api/configuration/nuxt.config 4 | export default defineNuxtConfig({ 5 | 6 | }) 7 | -------------------------------------------------------------------------------- /web/src/components/preact/Props.jsx: -------------------------------------------------------------------------------- 1 | import { h } from "preact" 2 | 3 | const Props = ({ answer = "a mystery" }) =>

The answer is {answer}

4 | 5 | export default Props 6 | -------------------------------------------------------------------------------- /components/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | -------------------------------------------------------------------------------- /vue-nuxt/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://v3.nuxtjs.org/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json", 4 | "compilerOptions": { 5 | "jsx": "preserve" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /web/src/components/svelte/Styling.svelte: -------------------------------------------------------------------------------- 1 |

Styled!

2 | 3 | -------------------------------------------------------------------------------- /svelte/src/components/Styling/Styling.svelte: -------------------------------------------------------------------------------- 1 |

Styled!

2 | 3 | -------------------------------------------------------------------------------- /app/apps/web/src/components/Vue.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /vue/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }) 8 | -------------------------------------------------------------------------------- /app/apps/web/src/components/Solid.tsx: -------------------------------------------------------------------------------- 1 | import type { Component } from "solid-js"; 2 | 3 | const Solid: Component = () => { 4 | return
Hello from Solid
; 5 | }; 6 | 7 | export default Solid; 8 | -------------------------------------------------------------------------------- /components/output/vue/vue3/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /solid/src/components/NestingComponents/Nested.tsx: -------------------------------------------------------------------------------- 1 | import { Component } from "solid-js"; 2 | 3 | const Nested: Component = () =>

{`...don't affect this element`}

; 4 | 5 | export default Nested; 6 | -------------------------------------------------------------------------------- /web/src/components/astro/Props.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | answer?: string 4 | } 5 | 6 | const { answer = "a mystery" } = Astro.props 7 | --- 8 | 9 |

The answer is {answer}

10 | -------------------------------------------------------------------------------- /web/src/components/vue/Props.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /react/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | -------------------------------------------------------------------------------- /react/src/components/HTML.tsx: -------------------------------------------------------------------------------- 1 | const string = `here's some HTML!!!`; 2 | 3 | const HTML = () => ( 4 |

5 | ); 6 | 7 | export default HTML; 8 | -------------------------------------------------------------------------------- /app/apps/docs/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "ui"; 2 | 3 | export default function Docs() { 4 | return ( 5 |
6 |

Docs

7 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /app/packages/eslint-config-custom/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["next", "turbo", "prettier"], 3 | rules: { 4 | "@next/next/no-html-link-for-pages": "off", 5 | "react/jsx-key": "off", 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /solid/src/index.tsx: -------------------------------------------------------------------------------- 1 | /* @refresh reload */ 2 | import { render } from 'solid-js/web'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | render(() => , document.getElementById('root') as HTMLElement); 8 | -------------------------------------------------------------------------------- /vue-nuxt/components/Nested/Nested2.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /vue/src/components/child/CustomAnswer.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /app/packages/tsconfig/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tsconfig", 3 | "version": "0.0.0", 4 | "private": true, 5 | "files": [ 6 | "base.json", 7 | "nextjs.json", 8 | "react-library.json" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /components/jest.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */ 2 | module.exports = { 3 | preset: 'ts-jest', 4 | testEnvironment: 'node', 5 | testMatch: ['/src/**/*.test.ts'], 6 | }; 7 | -------------------------------------------------------------------------------- /qwik/src/components/HelloWorld/Child.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from "@builder.io/qwik"; 2 | 3 | const Child = component$((props: { count: number }) => { 4 | return {props.count}; 5 | }); 6 | 7 | export default Child; -------------------------------------------------------------------------------- /solid/src/components/HTML/HTML.tsx: -------------------------------------------------------------------------------- 1 | const string = `here's some HTML!!!`; 2 | 3 | const HTML: React.FC = () => ( 4 |

5 | ); 6 | 7 | export default HTML; 8 | -------------------------------------------------------------------------------- /qwik/src/components/NestingComponents/Nested.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from "@builder.io/qwik"; 2 | 3 | const Nested = component$(()=>{ 4 | return ( 5 |

{`don't affect this element`}

6 | ) 7 | }) 8 | 9 | export default Nested; -------------------------------------------------------------------------------- /react-next/src/components/HTML/HTML.tsx: -------------------------------------------------------------------------------- 1 | const string = `here's some HTML!!!`; 2 | 3 | const HTML: React.FC = () => ( 4 |

5 | ); 6 | 7 | export default HTML; 8 | -------------------------------------------------------------------------------- /react-next/src/components/Props/Props.tsx: -------------------------------------------------------------------------------- 1 | import Nested from "./Nested"; 2 | 3 | const Props: React.FC = () => ( 4 | <> 5 | 6 | 7 | 8 | ); 9 | 10 | export default Props; 11 | -------------------------------------------------------------------------------- /vue-nuxt/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /vue/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /vue/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | const component: DefineComponent<{}, {}, any> 6 | export default component 7 | } 8 | -------------------------------------------------------------------------------- /web/src/components/preact/HTML.jsx: -------------------------------------------------------------------------------- 1 | import { h } from "preact" 2 | 3 | const string = `here's some HTML!!!` 4 | 5 | const HTML = () =>

6 | 7 | export default HTML 8 | -------------------------------------------------------------------------------- /web/src/components/react/HTML.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const string = `here's some HTML!!!` 4 | 5 | const HTML = () =>

6 | 7 | export default HTML 8 | -------------------------------------------------------------------------------- /web/src/components/svelte/BasicVariables.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /app/apps/web/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | -------------------------------------------------------------------------------- /app/apps/docs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /components/output/react/src/components/HelloWorld.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | function Hello(props) { 3 | return /* @__PURE__ */ React.createElement("div", null, "Hello World!"); 4 | } 5 | export { 6 | Hello as default 7 | }; 8 | -------------------------------------------------------------------------------- /react-next/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /react-next/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /vue-nuxt/components/Styling.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /vue/src/components/Styling.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /react/src/components/HelloWorld.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const HelloWorld = () => { 4 | const [name, setName] = useState("world"); 5 | 6 | return

Hello {name}!

; 7 | }; 8 | 9 | export default HelloWorld; 10 | -------------------------------------------------------------------------------- /solid/src/components/Custom/SolidTyper/styles.css: -------------------------------------------------------------------------------- 1 | @keyframes fade { 2 | 50% { 3 | opacity: 1; 4 | } 5 | } 6 | 7 | .cursor { 8 | opacity: 0; 9 | animation: fade 800ms steps(1) infinite; 10 | animation-delay: 100ms; 11 | } 12 | -------------------------------------------------------------------------------- /vue/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /web/src/components/vue/Styling.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /react/src/components/Custom/ReactTyper/styles.module.css: -------------------------------------------------------------------------------- 1 | @keyframes fade { 2 | 50% { 3 | opacity: 1; 4 | } 5 | } 6 | 7 | .cursor { 8 | opacity: 0; 9 | animation: fade 800ms steps(1) infinite; 10 | animation-delay: 100ms; 11 | } 12 | -------------------------------------------------------------------------------- /react/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /react-next/src/components/Custom/ReactTyper/styles.module.css: -------------------------------------------------------------------------------- 1 | @keyframes fade { 2 | 50% { 3 | opacity: 1; 4 | } 5 | } 6 | 7 | .cursor { 8 | opacity: 0; 9 | animation: fade 800ms steps(1) infinite; 10 | animation-delay: 100ms; 11 | } 12 | -------------------------------------------------------------------------------- /react-next/src/components/Props/Nested.tsx: -------------------------------------------------------------------------------- 1 | interface NestedProps { 2 | answer?: number | string; 3 | } 4 | 5 | const Nested: React.FC = ({ answer = "a mystery" }) => ( 6 |

The answer is {answer}

7 | ); 8 | 9 | export default Nested; 10 | -------------------------------------------------------------------------------- /web/src/components/vue/BasicVariables.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 14 | 15 | -------------------------------------------------------------------------------- /app/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | // This tells ESLint to load the config from the package `eslint-config-custom` 4 | extends: ["custom"], 5 | settings: { 6 | next: { 7 | rootDir: ["apps/*/"], 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /components/overrides/react-native/src/index-helpers/top-of-file.ts: -------------------------------------------------------------------------------- 1 | // example of overriding a no-op file to provide framework-specific functionality 2 | // in this case, providing a polyfill for URL in react-native environments. 3 | import 'react-native-url-polyfill/auto'; 4 | -------------------------------------------------------------------------------- /react-next/src/components/HelloWorld/HelloWorld.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const HelloWorld: React.FC = () => { 4 | const [name, setName] = useState("world"); 5 | 6 | return

Hello {name}!

; 7 | }; 8 | 9 | export default HelloWorld; 10 | -------------------------------------------------------------------------------- /solid/src/components/Props/Props.tsx: -------------------------------------------------------------------------------- 1 | import { Component } from "solid-js"; 2 | import Nested from "./Nested"; 3 | 4 | const Props: Component = () => ( 5 | <> 6 | 7 | 8 | 9 | ); 10 | 11 | export default Props; 12 | -------------------------------------------------------------------------------- /web/src/components/lit/HelloWorld.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit" 2 | 3 | export class HelloWorld extends LitElement { 4 | override render() { 5 | return html`

Hello world!

` 6 | } 7 | } 8 | 9 | customElements.define("hello-world", HelloWorld) 10 | -------------------------------------------------------------------------------- /solid/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import solidPlugin from 'vite-plugin-solid'; 3 | 4 | export default defineConfig({ 5 | plugins: [solidPlugin()], 6 | build: { 7 | target: 'esnext', 8 | polyfillDynamicImport: false, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /web/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /svelte/src/components/BasicVariables/BasicVariables.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /vue-nuxt/components/Props.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | -------------------------------------------------------------------------------- /vue-nuxt/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "nuxt build", 5 | "dev": "nuxt dev", 6 | "generate": "nuxt generate", 7 | "preview": "nuxt preview" 8 | }, 9 | "devDependencies": { 10 | "nuxt": "3.0.0-rc.1" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /app/apps/web/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /solid/src/components/HelloWorld/HelloWorld.tsx: -------------------------------------------------------------------------------- 1 | import { Component, createSignal } from "solid-js"; 2 | 3 | const HelloWorld: Component = () => { 4 | const [name, setName] = createSignal("world"); 5 | 6 | return

Hello {name}!

; 7 | }; 8 | 9 | export default HelloWorld; 10 | -------------------------------------------------------------------------------- /web/src/components/preact/Styling.jsx: -------------------------------------------------------------------------------- 1 | import { h } from "preact" 2 | 3 | const styles = { 4 | color: "purple", 5 | fontFamily: "'Comic Sans MS', cursive", 6 | fontSize: "2em", 7 | } 8 | 9 | const Styling = () =>

Styled!

10 | 11 | export default Styling 12 | -------------------------------------------------------------------------------- /web/src/components/react/Styling.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const styles = { 4 | color: "purple", 5 | fontFamily: "'Comic Sans MS', cursive", 6 | fontSize: "2em", 7 | } 8 | 9 | const Styling = () =>

Styled!

10 | 11 | export default Styling 12 | -------------------------------------------------------------------------------- /web/src/components/svelte/ConditionalRendering.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

{x} is greater than 10

7 | {:else if 5 > x} 8 |

{x} is less than 5

9 | {:else} 10 |

{x} is between 5 and 10

11 | {/if} -------------------------------------------------------------------------------- /web/src/components/solid/Styling.jsx: -------------------------------------------------------------------------------- 1 | /** @jsxImportSource solid-js */ 2 | 3 | const styles = { 4 | color: "purple", 5 | "font-family": "'Comic Sans MS', cursive", 6 | "font-size": "2em", 7 | } 8 | 9 | const Styling = () =>

Styled!

10 | 11 | export default Styling 12 | -------------------------------------------------------------------------------- /qwik/src/components/Props/Props.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from "@builder.io/qwik"; 2 | import Child from "./Child"; 3 | 4 | const Props = component$(() => { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ); 11 | }); 12 | 13 | export default Props; 14 | -------------------------------------------------------------------------------- /vue/src/components/BasicVariables.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 14 | 15 | -------------------------------------------------------------------------------- /web/src/components/lit/HTML.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit" 2 | 3 | const tagName = "hello-world" 4 | 5 | export class HelloWorld extends LitElement { 6 | override render() { 7 | return html`

Hello world!

` 8 | } 9 | } 10 | 11 | customElements.define(tagName, HelloWorld) 12 | -------------------------------------------------------------------------------- /web/src/components/lit/Props.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit" 2 | 3 | const tagName = "hello-world" 4 | 5 | export class HelloWorld extends LitElement { 6 | override render() { 7 | return html`

Hello world!

` 8 | } 9 | } 10 | 11 | customElements.define(tagName, HelloWorld) 12 | -------------------------------------------------------------------------------- /react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /solid/src/components/Props/Nested.tsx: -------------------------------------------------------------------------------- 1 | import { Component } from "solid-js"; 2 | 3 | interface NestedProps { 4 | answer?: number | string; 5 | } 6 | 7 | const Nested: Component = ({ answer = "a mystery" }) => ( 8 |

The answer is {answer}

9 | ); 10 | 11 | export default Nested; 12 | -------------------------------------------------------------------------------- /vue-nuxt/components/BasicVariables.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 14 | 15 | -------------------------------------------------------------------------------- /web/src/components/lit/ListLooping.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit" 2 | 3 | const tagName = "hello-world" 4 | 5 | export class HelloWorld extends LitElement { 6 | override render() { 7 | return html`

Hello world!

` 8 | } 9 | } 10 | 11 | customElements.define(tagName, HelloWorld) 12 | -------------------------------------------------------------------------------- /web/src/components/lit/Styling.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit" 2 | 3 | const tagName = "hello-world" 4 | 5 | export class HelloWorld extends LitElement { 6 | override render() { 7 | return html`

Hello world!

` 8 | } 9 | } 10 | 11 | customElements.define(tagName, HelloWorld) 12 | -------------------------------------------------------------------------------- /angular/src/app/html/html.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-html', 5 | template: `

here's some

`, 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | }) 8 | export class HTMLComponent {} 9 | -------------------------------------------------------------------------------- /react/src/components/Styling.tsx: -------------------------------------------------------------------------------- 1 | import { CSSProperties } from "react"; 2 | 3 | const styles: CSSProperties = { 4 | color: "purple", 5 | fontFamily: "Comic Sans MS', cursive", 6 | fontSize: "2em", 7 | }; 8 | 9 | const Styling = () =>

Styled!

; 10 | 11 | export default Styling; 12 | -------------------------------------------------------------------------------- /svelte/src/app.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // See https://kit.svelte.dev/docs/types#app 4 | // for information about these interfaces 5 | declare namespace App { 6 | // interface Locals {} 7 | // interface Platform {} 8 | // interface Session {} 9 | // interface Stuff {} 10 | } 11 | -------------------------------------------------------------------------------- /svelte/src/components/NestingComponents/NestingComponents.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

These styles...

6 | 7 | 8 | -------------------------------------------------------------------------------- /vue/src/components/Props.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /solid/src/index.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | overflow-x: hidden; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | } 13 | -------------------------------------------------------------------------------- /svelte/src/components/ConditionalRendering/ConditionalRendering.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | {#if x > 10} 6 |

{x} is greater than 10

7 | {:else if 5 > x} 8 |

{x} is less than 5

9 | {:else} 10 |

{x} is between 5 and 10

11 | {/if} -------------------------------------------------------------------------------- /web/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | .output/ 4 | 5 | # dependencies 6 | node_modules/ 7 | 8 | # logs 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | pnpm-debug.log* 13 | 14 | 15 | # environment variables 16 | .env 17 | .env.production 18 | 19 | # macOS-specific files 20 | .DS_Store 21 | -------------------------------------------------------------------------------- /web/src/components/lit/ConditionalRendering.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit" 2 | 3 | const tagName = "hello-world" 4 | 5 | export class HelloWorld extends LitElement { 6 | override render() { 7 | return html`

Hello world!

` 8 | } 9 | } 10 | 11 | customElements.define(tagName, HelloWorld) 12 | -------------------------------------------------------------------------------- /web/src/components/lit/DependentVariables.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit" 2 | 3 | const tagName = "hello-world" 4 | 5 | export class HelloWorld extends LitElement { 6 | override render() { 7 | return html`

Hello world!

` 8 | } 9 | } 10 | 11 | customElements.define(tagName, HelloWorld) 12 | -------------------------------------------------------------------------------- /angular/src/styles.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | overflow-x: hidden; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | } 13 | -------------------------------------------------------------------------------- /app/packages/tsconfig/react-library.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "React Library", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "jsx": "react-jsx", 7 | "lib": ["ES2015"], 8 | "module": "ESNext", 9 | "target": "es6" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /qwik/src/components/Props/Child.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from "@builder.io/qwik"; 2 | 3 | interface NestedProps { 4 | answer?: number | string; 5 | } 6 | 7 | const Child = component$(({ answer = "a mystery" }) => { 8 | return

The answer is {answer}

; 9 | }); 10 | 11 | export default Child; 12 | -------------------------------------------------------------------------------- /qwik/src/components/Styling/Styling.tsx: -------------------------------------------------------------------------------- 1 | import { component$, useScopedStyles$ } from "@builder.io/qwik"; 2 | import styles from "./Styling.css?inline"; 3 | 4 | const Styling = component$(() => { 5 | useScopedStyles$(styles); 6 | 7 | return

Styled!

; 8 | }); 9 | 10 | export default Styling; 11 | -------------------------------------------------------------------------------- /web/src/components/lit/LitComponents.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit" 2 | 3 | const tagName = "lit-components" 4 | 5 | export class LitComponents extends LitElement { 6 | override render() { 7 | return html`

Hello world!

` 8 | } 9 | } 10 | 11 | customElements.define(tagName, LitComponents) 12 | -------------------------------------------------------------------------------- /react-next/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | overflow-x: hidden; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | } 13 | -------------------------------------------------------------------------------- /app/turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turborepo.org/schema.json", 3 | "pipeline": { 4 | "build": { 5 | "dependsOn": ["^build"], 6 | "outputs": ["dist/**", ".next/**"] 7 | }, 8 | "lint": { 9 | "outputs": [] 10 | }, 11 | "dev": { 12 | "cache": false 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /react-next/src/components/Styling/Styling.tsx: -------------------------------------------------------------------------------- 1 | import { CSSProperties } from "react"; 2 | 3 | const styles: CSSProperties = { 4 | color: "purple", 5 | fontFamily: "Comic Sans MS', cursive", 6 | fontSize: "2em", 7 | }; 8 | 9 | const Styling: React.FC = () =>

Styled!

; 10 | 11 | export default Styling; 12 | -------------------------------------------------------------------------------- /app/apps/web/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | .output/ 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | -------------------------------------------------------------------------------- /qwik/src/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | overflow-x: hidden; 8 | min-width: 100vh; 9 | } 10 | 11 | * { 12 | box-sizing: border-box; 13 | } 14 | -------------------------------------------------------------------------------- /qwik/src/components/app/app.tsx: -------------------------------------------------------------------------------- 1 | import { component$, Host } from '@builder.io/qwik'; 2 | import { Page } from '../page/page'; 3 | import { useQwikCity } from '@builder.io/qwik-city'; 4 | 5 | export const App = component$(() => { 6 | useQwikCity(); 7 | 8 | return ( 9 | 10 | 11 | 12 | ); 13 | }); 14 | -------------------------------------------------------------------------------- /qwik/src/pages/INDEX: -------------------------------------------------------------------------------- 1 | # Site struct 2 | 3 | ## Welcome 4 | 5 | - [Welcome](index.mdx) 6 | 7 | ## Blog 8 | 9 | - [Resumable](blog/resumable.mdx) 10 | - [Progressive](blog/progressive.mdx) 11 | - [Reactive](blog/reactivity.mdx) 12 | 13 | ## Docs 14 | 15 | - [Qwik](https://qwik.builder.io) 16 | - [Partytown](https://partytown.builder.io/) 17 | -------------------------------------------------------------------------------- /solid/src/components/Styling/Styling.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX } from "solid-js"; 2 | 3 | const styles: JSX.CSSProperties = { 4 | "color": "purple", 5 | "font-family": "'Comic Sans MS', cursive", 6 | "font-size": "2em", 7 | }; 8 | 9 | const Styling: Component = () =>

Styled!

; 10 | 11 | export default Styling; 12 | -------------------------------------------------------------------------------- /svelte/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %svelte.head% 8 | 9 | 10 |
%svelte.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "es5", 5 | "jsx": "preserve", 6 | "esModuleInterop": true, 7 | "skipLibCheck": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "jsxImportSource": "@builder.io/mitosis" 10 | }, 11 | "include": [ 12 | "src" 13 | ] 14 | } -------------------------------------------------------------------------------- /qwik/.prettierignore: -------------------------------------------------------------------------------- 1 | **/*.log 2 | **/.DS_Store 3 | *. 4 | .vscode/settings.json 5 | .history 6 | .yarn 7 | dist 8 | dist-dev 9 | etc 10 | external 11 | node_modules 12 | temp 13 | tsc-out 14 | tsdoc-metadata.json 15 | target 16 | output 17 | rollup.config.js 18 | build 19 | .cache 20 | .vscode 21 | .rollup.cache 22 | dist 23 | tsconfig.tsbuildinfo 24 | -------------------------------------------------------------------------------- /qwik/src/entry.ssr.tsx: -------------------------------------------------------------------------------- 1 | import { renderToString, RenderToStringOptions } from '@builder.io/qwik/server'; 2 | import { manifest } from '@qwik-client-manifest'; 3 | import { Root } from './root'; 4 | 5 | export function render(opts: RenderToStringOptions) { 6 | return renderToString(, { 7 | manifest, 8 | ...opts, 9 | }); 10 | } 11 | -------------------------------------------------------------------------------- /react/src/components/Props.tsx: -------------------------------------------------------------------------------- 1 | interface NestedProps { 2 | answer?: number | string; 3 | } 4 | 5 | const Nested = ({ answer = "a mystery" }: NestedProps) => ( 6 |

The answer is {answer}

7 | ); 8 | 9 | const Props = () => ( 10 | <> 11 | 12 | 13 | 14 | ); 15 | 16 | export default Props; 17 | -------------------------------------------------------------------------------- /angular/src/app/hello-world/hello-world.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-hello-world', 5 | template: `

Hello {{ name }}!

`, 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | }) 8 | export class HelloWorldComponent { 9 | name = 'world'; 10 | } 11 | -------------------------------------------------------------------------------- /angular/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /angular/src/app/nesting-components/nested-component/nested-component.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-nested-component', 5 | template: `

...don't affect this element

`, 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | }) 8 | export class NestedComponentComponent {} 9 | -------------------------------------------------------------------------------- /angular/src/app/props/props.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-props', 5 | template: ` 6 | 7 | 8 | `, 9 | changeDetection: ChangeDetectionStrategy.Default, 10 | }) 11 | export class PropsComponent {} 12 | -------------------------------------------------------------------------------- /angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /vue/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /web/src/components/vue/ConditionalRendering.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /react/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /vue-nuxt/components/ConditionalRendering.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /vue/src/components/ConditionalRendering.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /web/src/components/svelte/DependentVariables.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 15 | 16 |

{count} * 2 = {doubled}

17 |

{doubled} * 2 = {quadrupled}

-------------------------------------------------------------------------------- /angular/src/app/props/nested/nested.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-nested', 5 | template: `

The answer is {{ answer }}

`, 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | }) 8 | export class NestedComponent { 9 | @Input() answer: string | number = 'a mystery'; 10 | } 11 | -------------------------------------------------------------------------------- /web/src/components/react/BasicVariables.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | 3 | const BasicVariables = () => { 4 | const [count, setCount] = useState(0) 5 | 6 | function handleClick() { 7 | setCount(count + 1) 8 | } 9 | return ( 10 | 13 | ) 14 | } 15 | 16 | export default BasicVariables 17 | -------------------------------------------------------------------------------- /web/src/components/solid/BasicVariables.jsx: -------------------------------------------------------------------------------- 1 | import { createSignal } from "solid-js" 2 | 3 | const BasicVariables = () => { 4 | const [count, setCount] = createSignal(0) 5 | 6 | function handleClick() { 7 | setCount(count() + 1) 8 | } 9 | return ( 10 | 13 | ) 14 | } 15 | 16 | export default BasicVariables 17 | -------------------------------------------------------------------------------- /angular/src/app/page-content/page-content.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-page-content', 5 | templateUrl: './page-content.component.html', 6 | styleUrls: ['./page-content.component.css'] 7 | }) 8 | export class PageContentComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /solid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "ESNext", 5 | "module": "ESNext", 6 | "moduleResolution": "node", 7 | "allowSyntheticDefaultImports": true, 8 | "esModuleInterop": true, 9 | "jsx": "preserve", 10 | "jsxImportSource": "solid-js", 11 | "types": ["vite/client"], 12 | "noEmit": true, 13 | "isolatedModules": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /qwik/src/components/BasicVariables/BasicVariables.tsx: -------------------------------------------------------------------------------- 1 | import { component$, useStore } from "@builder.io/qwik"; 2 | 3 | const BasicVariables = component$(() => { 4 | const store = useStore({ count: 0 }); 5 | 6 | return ( 7 | 10 | ); 11 | }); 12 | 13 | export default BasicVariables; 14 | -------------------------------------------------------------------------------- /qwik/.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.log 2 | **/.DS_Store 3 | *. 4 | .vscode/settings.json 5 | .history 6 | .yarn 7 | bazel-* 8 | bazel-bin 9 | bazel-out 10 | bazel-qwik 11 | bazel-testlogs 12 | dist 13 | dist-dev 14 | etc 15 | external 16 | node_modules 17 | temp 18 | tsc-out 19 | tsdoc-metadata.json 20 | target 21 | output 22 | rollup.config.js 23 | build 24 | .cache 25 | .vscode 26 | .rollup.cache 27 | dist 28 | tsconfig.tsbuildinfo 29 | -------------------------------------------------------------------------------- /react/src/components/BasicVariables.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const BasicVariables = () => { 4 | const [count, setCount] = useState(0); 5 | 6 | function handleClick() { 7 | setCount(count + 1); 8 | } 9 | return ( 10 | 13 | ); 14 | }; 15 | 16 | export default BasicVariables; 17 | -------------------------------------------------------------------------------- /svelte/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import preprocess from 'svelte-preprocess'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://github.com/sveltejs/svelte-preprocess 7 | // for more information about preprocessors 8 | preprocess: preprocess(), 9 | 10 | kit: { 11 | adapter: adapter() 12 | } 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web/public/logos/react-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | React Logo 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /web/src/components/preact/BasicVariables.jsx: -------------------------------------------------------------------------------- 1 | import { h } from "preact" 2 | import { useState } from "preact/hooks" 3 | 4 | const BasicVariables = () => { 5 | const [count, setCount] = useState(0) 6 | 7 | function handleClick() { 8 | setCount(count + 1) 9 | } 10 | return ( 11 | 14 | ) 15 | } 16 | 17 | export default BasicVariables 18 | -------------------------------------------------------------------------------- /react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /vue-nuxt/components/NestingComponents.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | -------------------------------------------------------------------------------- /angular/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /react-next/src/components/BasicVariables/BasicVariables.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const BasicVariables: React.FC = () => { 4 | const [count, setCount] = useState(0); 5 | 6 | function handleClick() { 7 | setCount(count + 1); 8 | } 9 | return ( 10 | 13 | ); 14 | }; 15 | 16 | export default BasicVariables; 17 | -------------------------------------------------------------------------------- /components/overrides/vue/src/components/error-boundary.vue: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /svelte/src/components/DependentVariables/DependentVariables.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | 17 |

{count} * 2 = {doubled}

18 |

{doubled} * 2 = {quadrupled}

-------------------------------------------------------------------------------- /svelte/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "lib": ["es2020", "DOM"], 9 | "moduleResolution": "node", 10 | "module": "es2020", 11 | "resolveJsonModule": true, 12 | "skipLibCheck": true, 13 | "sourceMap": true, 14 | "strict": true, 15 | "target": "es2020" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /qwik/src/components/NestingComponents/NestingComponents.tsx: -------------------------------------------------------------------------------- 1 | import { component$, useScopedStyles$ } from "@builder.io/qwik"; 2 | import Nested from "./Nested"; 3 | import styles from "./NestingComponents.css?inline"; 4 | 5 | const NestingComponents = component$(() => { 6 | useScopedStyles$(styles); 7 | 8 | return ( 9 | <> 10 |

These styles...

11 | 12 | 13 | ); 14 | }); 15 | 16 | export default NestingComponents; 17 | -------------------------------------------------------------------------------- /solid/src/components/BasicVariables/BasicVariables.tsx: -------------------------------------------------------------------------------- 1 | import { Component, createSignal } from "solid-js"; 2 | 3 | const BasicVariables: Component = () => { 4 | const [count, setCount] = createSignal(0); 5 | 6 | function handleClick() { 7 | setCount(count() + 1); 8 | } 9 | return ( 10 | 13 | ); 14 | }; 15 | 16 | export default BasicVariables; 17 | -------------------------------------------------------------------------------- /vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc --noEmit && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "vue": "^3.2.37" 13 | }, 14 | "devDependencies": { 15 | "@vitejs/plugin-vue": "^3.0.0", 16 | "typescript": "^4.6.4", 17 | "vite": "^3.0.0", 18 | "vue-tsc": "^0.38.4" 19 | } 20 | } -------------------------------------------------------------------------------- /angular/src/app/styling/styling.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-styling', 5 | template: `

Styled!

`, 6 | styles: [ 7 | ` 8 | p { 9 | color: purple; 10 | font-family: 'Comic Sans MS', cursive; 11 | font-size: 2em; 12 | } 13 | `, 14 | ], 15 | changeDetection: ChangeDetectionStrategy.OnPush, 16 | }) 17 | export class StylingComponent {} 18 | -------------------------------------------------------------------------------- /solid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-template-solid", 3 | "version": "0.0.0", 4 | "description": "", 5 | "scripts": { 6 | "start": "vite", 7 | "dev": "vite", 8 | "build": "vite build", 9 | "serve": "vite preview" 10 | }, 11 | "license": "MIT", 12 | "devDependencies": { 13 | "typescript": "^4.6.3", 14 | "vite": "^2.8.6", 15 | "vite-plugin-solid": "^2.2.6" 16 | }, 17 | "dependencies": { 18 | "solid-js": "^1.3.13" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /vue/src/components/NestingComponents.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 17 | 18 | 25 | -------------------------------------------------------------------------------- /qwik/.gitignore: -------------------------------------------------------------------------------- 1 | # Build 2 | build 3 | dist 4 | server 5 | functions/**/*.js 6 | 7 | # Development 8 | node_modules 9 | 10 | # Cache 11 | .cache 12 | .mf 13 | .vscode 14 | .rollup.cache 15 | tsconfig.tsbuildinfo 16 | 17 | # Logs 18 | logs 19 | *.log 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | pnpm-debug.log* 24 | lerna-debug.log* 25 | 26 | # Editor 27 | !.vscode/extensions.json 28 | .idea 29 | .DS_Store 30 | *.suo 31 | *.ntvs* 32 | *.njsproj 33 | *.sln 34 | *.sw? 35 | -------------------------------------------------------------------------------- /web/public/logos/vue-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /app/packages/ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui", 3 | "version": "0.0.0", 4 | "main": "./index.tsx", 5 | "types": "./index.tsx", 6 | "license": "MIT", 7 | "scripts": { 8 | "lint": "eslint *.ts*" 9 | }, 10 | "devDependencies": { 11 | "@types/react": "^17.0.37", 12 | "@types/react-dom": "^17.0.11", 13 | "eslint": "^7.32.0", 14 | "eslint-config-custom": "*", 15 | "react": "^18.2.0", 16 | "tsconfig": "*", 17 | "typescript": "^4.5.2" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /web/src/components/react/ConditionalRendering.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | 3 | const ConditionalRendering = () => { 4 | const [x] = useState(Math.floor(Math.random() * 15)) 5 | 6 | return ( 7 | <> 8 | {x > 10 ? ( 9 |

{x} is greater than 10

10 | ) : 5 > x ? ( 11 |

{x} is less than 5

12 | ) : ( 13 |

{x} is between 5 and 10

14 | )} 15 | 16 | ) 17 | } 18 | 19 | export default ConditionalRendering 20 | -------------------------------------------------------------------------------- /react/src/components/ConditionalRendering.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const ConditionalRendering = () => { 4 | const [x, setX] = useState(Math.floor(Math.random() * 15)); 5 | 6 | return ( 7 | <> 8 | {x > 10 ? ( 9 |

{x} is greater than 10

10 | ) : 5 > x ? ( 11 |

{x} is less than 5

12 | ) : ( 13 |

{x} is between 5 and 10

14 | )} 15 | 16 | ); 17 | }; 18 | 19 | export default ConditionalRendering; 20 | -------------------------------------------------------------------------------- /vue/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/src/components/svelte/ListLooping.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

The Famous Cats of YouTube

10 | 19 | -------------------------------------------------------------------------------- /react-next/src/components/NestingComponents/NestingComponents.tsx: -------------------------------------------------------------------------------- 1 | import { CSSProperties } from "react"; 2 | import Nested from "./Nested"; 3 | 4 | const styles: CSSProperties = { 5 | color: "purple", 6 | fontFamily: "'Comic Sans MS', cursive", 7 | fontSize: "2em", 8 | }; 9 | 10 | const NestingComponents: React.FC = () => { 11 | return ( 12 | <> 13 |

These styles...

14 | 15 | 16 | ); 17 | }; 18 | 19 | export default NestingComponents; 20 | -------------------------------------------------------------------------------- /qwik/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "module": "ES2020", 5 | "lib": ["es2020", "DOM"], 6 | "jsx": "react-jsx", 7 | "jsxImportSource": "@builder.io/qwik", 8 | "strict": true, 9 | "resolveJsonModule": true, 10 | "moduleResolution": "node", 11 | "esModuleInterop": true, 12 | "skipLibCheck": true, 13 | "incremental": true, 14 | "isolatedModules": true, 15 | "types": ["vite/client"] 16 | }, 17 | "include": ["src"] 18 | } 19 | -------------------------------------------------------------------------------- /react/src/components/NestingComponents.tsx: -------------------------------------------------------------------------------- 1 | import { CSSProperties } from "react"; 2 | 3 | const styles: CSSProperties = { 4 | color: "purple", 5 | fontFamily: "'Comic Sans MS', cursive", 6 | fontSize: "2em", 7 | }; 8 | 9 | const Nested = () =>

{`...don't affect this element`}

; 10 | 11 | const NestingComponents = () => { 12 | return ( 13 | <> 14 |

These styles...

15 | 16 | 17 | ); 18 | }; 19 | 20 | export default NestingComponents; 21 | -------------------------------------------------------------------------------- /solid/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as BasicVariables } from './BasicVariables'; 2 | export { default as ConditionalRendering } from './ConditionalRendering'; 3 | export { default as DependentVariables } from './DependentVariables'; 4 | export { default as HelloWorld } from './HelloWorld'; 5 | export { default as ListLooping } from './ListLooping'; 6 | export { default as NestingComponents } from './NestingComponents'; 7 | export { default as Props } from './Props'; 8 | export { default as Styling } from './Styling'; -------------------------------------------------------------------------------- /web/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | import tailwind from "@astrojs/tailwind"; 3 | import react from "@astrojs/react"; 4 | import solidJs from "@astrojs/solid-js"; 5 | import vue from "@astrojs/vue"; 6 | import svelte from "@astrojs/svelte"; 7 | import preact from "@astrojs/preact"; 8 | import lit from "@astrojs/lit"; 9 | 10 | // https://astro.build/config 11 | export default defineConfig({ 12 | integrations: [tailwind(), react(), solidJs(), svelte(), preact(), lit(), vue()] 13 | }); -------------------------------------------------------------------------------- /angular/src/app/page-content/page-content.component.css: -------------------------------------------------------------------------------- 1 | .components { 2 | width: 100%; 3 | min-height: 100vh; 4 | background-color: rgba(100,80,180,0.1); 5 | padding: 24px; 6 | } 7 | 8 | .mobile { 9 | display: none; 10 | } 11 | 12 | .heading { 13 | font-size: 2.5rem; 14 | font-weight: 800; 15 | color: rgb(0, 0, 92); 16 | } 17 | 18 | @media screen and (max-width: 480px) { 19 | .mobile { 20 | display: flex; 21 | justify-content: flex-end; 22 | } 23 | 24 | .heading { 25 | font-size: 2rem; 26 | } 27 | } -------------------------------------------------------------------------------- /qwik/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as BasicVariables } from "./BasicVariables"; 2 | export { default as ConditionalRendering } from "./ConditionalRendering"; 3 | export { default as DependentVariables } from "./DependentVariables"; 4 | export { default as HelloWorld } from "./HelloWorld"; 5 | export { default as ListLooping } from "./ListLooping"; 6 | export { default as NestingComponents } from "./NestingComponents"; 7 | export { default as Props } from "./Props"; 8 | export { default as Styling } from "./Styling"; 9 | -------------------------------------------------------------------------------- /solid/src/components/NestingComponents/NestingComponents.tsx: -------------------------------------------------------------------------------- 1 | import { Component, JSX } from "solid-js"; 2 | import Nested from "./Nested"; 3 | 4 | const styles: JSX.CSSProperties = { 5 | "color": "purple", 6 | "font-family": "'Comic Sans MS', cursive", 7 | "font-size": "2em", 8 | }; 9 | 10 | const NestingComponents: Component = () => { 11 | return ( 12 | <> 13 |

These styles...

14 | 15 | 16 | ); 17 | }; 18 | 19 | export default NestingComponents; 20 | -------------------------------------------------------------------------------- /svelte/src/components/ListLooping/ListLooping.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

The Famous Cats of YouTube

10 | 19 | -------------------------------------------------------------------------------- /qwik/src/sections/PageContent/PageContent.css: -------------------------------------------------------------------------------- 1 | .components { 2 | width: 100%; 3 | min-height: 100vh; 4 | background-color: rgba(100,80,180,0.1); 5 | padding: 24px; 6 | } 7 | 8 | .mobile { 9 | display: none; 10 | } 11 | 12 | .heading { 13 | font-size: 2.5rem; 14 | font-weight: 800; 15 | color: rgb(0, 0, 92); 16 | } 17 | 18 | @media screen and (max-width: 480px) { 19 | .mobile { 20 | display: flex; 21 | justify-content: flex-end; 22 | } 23 | 24 | .heading { 25 | font-size: 2rem; 26 | } 27 | } -------------------------------------------------------------------------------- /angular/src/app/page-content/page-content.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
-------------------------------------------------------------------------------- /app/packages/eslint-config-custom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-config-custom", 3 | "version": "0.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "dependencies": { 7 | "eslint": "^7.23.0", 8 | "eslint-config-next": "^12.0.8", 9 | "eslint-config-prettier": "^8.3.0", 10 | "eslint-plugin-react": "7.31.8", 11 | "eslint-config-turbo": "latest" 12 | }, 13 | "devDependencies": { 14 | "typescript": "^4.7.4" 15 | }, 16 | "publishConfig": { 17 | "access": "public" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /components/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | extends: [ 7 | 'eslint:recommended', 8 | 'plugin:@typescript-eslint/recommended', 9 | 'plugin:@builder.io/mitosis/recommended', 10 | ], 11 | parser: '@typescript-eslint/parser', 12 | parserOptions: { 13 | ecmaFeatures: { 14 | jsx: true, 15 | }, 16 | ecmaVersion: 'latest', 17 | sourceType: 'module', 18 | }, 19 | plugins: ['@typescript-eslint', '@builder.io/mitosis'], 20 | }; 21 | -------------------------------------------------------------------------------- /solid/src/sections/PageContent/PageContent.module.css: -------------------------------------------------------------------------------- 1 | .components { 2 | width: 100%; 3 | min-height: 100vh; 4 | background-color: rgba(100,80,180,0.1); 5 | padding: 24px; 6 | } 7 | 8 | .mobile { 9 | display: none; 10 | } 11 | 12 | .heading { 13 | font-size: 2.5rem; 14 | font-weight: 800; 15 | color: rgb(0, 0, 92); 16 | } 17 | 18 | @media screen and (max-width: 480px) { 19 | .mobile { 20 | display: flex; 21 | justify-content: flex-end; 22 | } 23 | 24 | .heading { 25 | font-size: 2rem; 26 | } 27 | } -------------------------------------------------------------------------------- /web/src/components/lit/BasicVariables.ts: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit" 2 | import { state } from "lit/decorators.js" 3 | 4 | export class MyComponent extends LitElement { 5 | override createRenderRoot() { 6 | return this 7 | } 8 | 9 | @state() count = 0 10 | 11 | handleClick = function handleClick() { 12 | this.count = this.count + 1 13 | } 14 | 15 | override render() { 16 | return html` 17 | 18 | ` 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /web/src/components/preact/ConditionalRendering.jsx: -------------------------------------------------------------------------------- 1 | import { h } from "preact" 2 | import { useState } from "preact/hooks" 3 | 4 | const ConditionalRendering = () => { 5 | const [x] = useState(Math.floor(Math.random() * 15)) 6 | 7 | return ( 8 | <> 9 | {x > 10 ? ( 10 |

{x} is greater than 10

11 | ) : 5 > x ? ( 12 |

{x} is less than 5

13 | ) : ( 14 |

{x} is between 5 and 10

15 | )} 16 | 17 | ) 18 | } 19 | 20 | export default ConditionalRendering 21 | -------------------------------------------------------------------------------- /react-next/src/components/ConditionalRendering/ConditionalRendering.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | const ConditionalRendering: React.FC = () => { 4 | const [x, setX] = useState(Math.floor(Math.random() * 15)); 5 | 6 | return ( 7 | <> 8 | {x > 10 ? ( 9 |

{x} is greater than 10

10 | ) : 5 > x ? ( 11 |

{x} is less than 5

12 | ) : ( 13 |

{x} is between 5 and 10

14 | )} 15 | 16 | ); 17 | }; 18 | 19 | export default ConditionalRendering; 20 | -------------------------------------------------------------------------------- /react-next/src/sections/PageContent/PageContent.module.css: -------------------------------------------------------------------------------- 1 | .components { 2 | width: 100%; 3 | min-height: 100vh; 4 | background-color: rgba(100,80,180,0.1); 5 | padding: 24px; 6 | } 7 | 8 | .mobile { 9 | display: none; 10 | } 11 | 12 | .heading { 13 | font-size: 2.5rem; 14 | font-weight: 800; 15 | color: rgb(0, 0, 92); 16 | } 17 | 18 | @media screen and (max-width: 480px) { 19 | .mobile { 20 | display: flex; 21 | justify-content: flex-end; 22 | } 23 | 24 | .heading { 25 | font-size: 2rem; 26 | } 27 | } -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | .pnp 6 | .pnp.js 7 | 8 | # testing 9 | coverage 10 | 11 | # next.js 12 | .next/ 13 | out/ 14 | build 15 | 16 | # misc 17 | .DS_Store 18 | *.pem 19 | 20 | # debug 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | .pnpm-debug.log* 25 | 26 | # local env files 27 | .env.local 28 | .env.development.local 29 | .env.test.local 30 | .env.production.local 31 | 32 | # turbo 33 | .turbo 34 | -------------------------------------------------------------------------------- /qwik/src/components/footer/footer.tsx: -------------------------------------------------------------------------------- 1 | import { component$, Host, useScopedStyles$ } from '@builder.io/qwik'; 2 | import styles from './footer.css?inline'; 3 | 4 | export const Footer = component$( 5 | () => { 6 | useScopedStyles$(styles); 7 | 8 | return ( 9 | 10 |
11 | Made with ♡ by the 12 | Builder.io 13 | team 14 |
15 | 16 | ); 17 | }, 18 | { tagName: 'footer' } 19 | ); 20 | -------------------------------------------------------------------------------- /vue-nuxt/sections/Navbar.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | -------------------------------------------------------------------------------- /react-next/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0" 14 | }, 15 | "devDependencies": { 16 | "@types/react": "^18.0.15", 17 | "@types/react-dom": "^18.0.6", 18 | "@vitejs/plugin-react": "^2.0.0", 19 | "typescript": "^4.6.4", 20 | "vite": "^3.0.0" 21 | } 22 | } -------------------------------------------------------------------------------- /vue-nuxt/components/DependentVariables.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /vue/src/components/DependentVariables.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /angular/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async () => { 6 | await TestBed.configureTestingModule({ 7 | declarations: [AppComponent], 8 | }).compileComponents(); 9 | }); 10 | 11 | it('should create the app', () => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.componentInstance; 14 | expect(app).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /qwik/src/components/ConditionalRendering/ConditionalRendering.tsx: -------------------------------------------------------------------------------- 1 | import { component$, useStore } from "@builder.io/qwik"; 2 | 3 | const ConditionalRendering = component$(() => { 4 | const { x } = useStore({ x: Math.floor(Math.random() * 15) }); 5 | return ( 6 | <> 7 | {x > 10 ? ( 8 |

{x} is greater than 10

9 | ) : 5 > x ? ( 10 |

{x} is less than 5

11 | ) : ( 12 |

{x} is between 5 and 10

13 | )} 14 | 15 | ); 16 | }); 17 | 18 | export default ConditionalRendering; 19 | -------------------------------------------------------------------------------- /qwik/src/entry.dev.tsx: -------------------------------------------------------------------------------- 1 | import { render } from '@builder.io/qwik'; 2 | import { Root } from './root'; 3 | 4 | /** 5 | * Development entry point using only client-side modules: 6 | * - Do not use this mode in production! 7 | * - No SSR 8 | * - No portion of the application is pre-rendered on the server. 9 | * - All of the application is running eagerly in the browser. 10 | * - More code is transferred to the browser than in SSR mode. 11 | * - Optimizer/Serialization/Deserialization code is not exercised! 12 | */ 13 | render(document, ); 14 | -------------------------------------------------------------------------------- /web/src/components/vue/DependentVariables.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 26 | -------------------------------------------------------------------------------- /angular/src/app/dependent-variables/dependent-variables.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-dependent-variables', 5 | template: ` 6 | 7 | 8 | `, 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | }) 11 | export class DependentVariablesComponent { 12 | count = 1; 13 | 14 | handleClick() { 15 | this.count++; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /qwik/src/layouts/not-found/not-found.tsx: -------------------------------------------------------------------------------- 1 | import { component$, Host, useScopedStyles$ } from '@builder.io/qwik'; 2 | import { Header } from '../../components/header/header'; 3 | import { SideBar } from '../../components/sidebar/sidebar'; 4 | import styles from './not-found.css?inline'; 5 | 6 | const NotFound = component$(() => { 7 | useScopedStyles$(styles); 8 | 9 | return ( 10 | 11 |
12 | 13 |
Not Found
14 | 15 | ); 16 | }); 17 | 18 | export default NotFound; 19 | -------------------------------------------------------------------------------- /react-next/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as BasicVariables } from './BasicVariables'; 2 | export { default as ConditionalRendering } from './ConditionalRendering'; 3 | export { default as DependentVariables } from './DependentVariables'; 4 | export { default as HelloWorld } from './HelloWorld'; 5 | export { default as HTML } from './HTML'; 6 | export { default as ListLooping } from './ListLooping'; 7 | export { default as NestingComponents } from './NestingComponents'; 8 | export { default as Props } from './Props'; 9 | export { default as Styling } from './Styling'; -------------------------------------------------------------------------------- /web/src/components/solid/ConditionalRendering.jsx: -------------------------------------------------------------------------------- 1 | import { createSignal, Match, Switch } from "solid-js" 2 | 3 | const ConditionalRendering = () => { 4 | const [x] = createSignal(Math.floor(Math.random() * 15)) 5 | 6 | return ( 7 | {x()} is between 5 and 10

}> 8 | 10}> 9 |

{x()} is greater than 10

10 | 11 | x()}> 12 |

{x()} is less than 5

13 | 14 | 15 | ) 16 | } 17 | 18 | export default ConditionalRendering 19 | -------------------------------------------------------------------------------- /web/src/pages/lit/[id].astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { componentsList } from "../../utils/components" 3 | import Layout from "../../layouts/Layout.astro" 4 | import { LitComponents } from "../../components/lit/LitComponents" 5 | 6 | export function getStaticPaths() { 7 | return componentsList.map((component) => ({ params: { id: component } })) 8 | } 9 | 10 | const { id } = Astro.params 11 | --- 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | package-lock.json 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 14 | dist/ 15 | .output/ 16 | 17 | # misc 18 | .DS_Store 19 | *.pem 20 | 21 | # debug 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | .pnpm-debug.log* 26 | 27 | # env files 28 | .env*.local 29 | .env 30 | .env.production 31 | 32 | # vercel 33 | .vercel 34 | 35 | # typescript 36 | *.tsbuildinfo 37 | -------------------------------------------------------------------------------- /react/src/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as BasicVariables } from "./BasicVariables"; 2 | export { default as ConditionalRendering } from "./ConditionalRendering"; 3 | export { default as DependentVariables } from "./DependentVariables"; 4 | export { default as HelloWorld } from "./HelloWorld"; 5 | export { default as HTML } from "./HTML"; 6 | export { default as ListLooping } from "./ListLooping"; 7 | export { default as NestingComponents } from "./NestingComponents"; 8 | export { default as Props } from "./Props"; 9 | export { default as Styling } from "./Styling"; 10 | -------------------------------------------------------------------------------- /solid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Solid App 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /qwik/src/components/header/header.tsx: -------------------------------------------------------------------------------- 1 | import { component$, Host, useScopedStyles$ } from '@builder.io/qwik'; 2 | import styles from './header.css?inline'; 3 | 4 | export const Header = component$( 5 | () => { 6 | useScopedStyles$(styles); 7 | 8 | return ( 9 | 10 |
11 | 16 |
17 | 18 | ); 19 | }, 20 | { tagName: 'header' } 21 | ); 22 | -------------------------------------------------------------------------------- /vue/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["ESNext", "DOM"], 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /angular/src/app/basic-variables/basic-variables.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-basic-variables', 5 | template: ` 6 | 9 | `, 10 | changeDetection: ChangeDetectionStrategy.OnPush, 11 | }) 12 | export class BasicVariablesComponent { 13 | count = 0; 14 | 15 | // we can also mutate primitives on the template directly 16 | handleClick() { 17 | this.count++; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /angular/src/app/nesting-components/nesting-components.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-nesting-components', 5 | template: ` 6 |

These styles

7 | 8 | `, 9 | styles: [ 10 | ` 11 | p { 12 | color: purple; 13 | font-family: 'Comic Sans MS', cursive; 14 | font-size: 2em; 15 | } 16 | `, 17 | ], 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | }) 20 | export class NestingComponentsComponent {} 21 | -------------------------------------------------------------------------------- /web/src/pages/vue/[id].astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { componentsList } from "../../utils/components" 3 | import Layout from "../../layouts/Layout.astro" 4 | import VueComponents from "../../components/vue/VueComponents.vue" 5 | 6 | export function getStaticPaths() { 7 | return componentsList.map((component) => ({ params: { id: component } })) 8 | } 9 | 10 | const { id } = Astro.params 11 | --- 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "0.0.0", 4 | "private": true, 5 | "workspaces": [ 6 | "apps/*", 7 | "packages/*" 8 | ], 9 | "scripts": { 10 | "build": "turbo run build", 11 | "dev": "turbo run dev --parallel", 12 | "lint": "turbo run lint", 13 | "format": "prettier --write \"**/*.{ts,tsx,md}\"" 14 | }, 15 | "devDependencies": { 16 | "eslint-config-custom": "*", 17 | "prettier": "latest", 18 | "turbo": "latest" 19 | }, 20 | "engines": { 21 | "node": ">=14.0.0" 22 | }, 23 | "dependencies": {}, 24 | "packageManager": "npm@8.5.5" 25 | } -------------------------------------------------------------------------------- /solid/src/components/ConditionalRendering/ConditionalRendering.tsx: -------------------------------------------------------------------------------- 1 | import { Component, createSignal, Match, Switch } from "solid-js"; 2 | 3 | const ConditionalRendering: Component = () => { 4 | const [x, setX] = createSignal(Math.floor(Math.random() * 15)); 5 | 6 | return ( 7 | {x()} is between 5 and 10

}> 8 | 10}> 9 |

{x()} is greater than 10

10 | 11 | x()}> 12 |

{x()} is less than 5

13 | 14 | 15 | ); 16 | }; 17 | 18 | export default ConditionalRendering; 19 | -------------------------------------------------------------------------------- /web/src/pages/react/[id].astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { componentsList } from "../../utils/components" 3 | import Layout from "../../layouts/Layout.astro" 4 | import ReactComponents from "../../components/react/ReactComponents" 5 | 6 | export function getStaticPaths() { 7 | return componentsList.map((component) => ({ params: { id: component } })) 8 | } 9 | 10 | const { id } = Astro.params 11 | --- 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /web/src/pages/solid/[id].astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { componentsList } from "../../utils/components" 3 | import Layout from "../../layouts/Layout.astro" 4 | import SolidComponents from "../../components/solid/SolidComponents" 5 | 6 | export function getStaticPaths() { 7 | return componentsList.map((component) => ({ params: { id: component } })) 8 | } 9 | 10 | const { id } = Astro.params 11 | --- 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /react-next/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /web/src/pages/preact/[id].astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { componentsList } from "../../utils/components" 3 | import Layout from "../../layouts/Layout.astro" 4 | import PreactComponents from "../../components/preact/PreactComponents" 5 | 6 | export function getStaticPaths() { 7 | return componentsList.map((component) => ({ params: { id: component } })) 8 | } 9 | 10 | const { id } = Astro.params 11 | --- 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /web/src/pages/svelte/[id].astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { componentsList } from "../../utils/components" 3 | import Layout from "../../layouts/Layout.astro" 4 | import SvelteComponents from "../../components/svelte/SvelteComponents.svelte" 5 | 6 | export function getStaticPaths() { 7 | return componentsList.map((component) => ({ params: { id: component } })) 8 | } 9 | 10 | const { id } = Astro.params 11 | --- 12 | 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /app/packages/tsconfig/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Default", 4 | "compilerOptions": { 5 | "composite": false, 6 | "declaration": true, 7 | "declarationMap": true, 8 | "esModuleInterop": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "inlineSources": false, 11 | "isolatedModules": true, 12 | "moduleResolution": "node", 13 | "noUnusedLocals": false, 14 | "noUnusedParameters": false, 15 | "preserveWatchOutput": true, 16 | "skipLibCheck": true, 17 | "strict": true 18 | }, 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /qwik/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import { qwikVite } from '@builder.io/qwik/optimizer'; 3 | import { qwikCity } from '@builder.io/qwik-city/vite'; 4 | import { resolve } from 'path'; 5 | /* VITE_IMPORTS */ 6 | 7 | export default defineConfig(() => { 8 | return { 9 | /* VITE_CONFIG */ 10 | plugins: [ 11 | qwikCity({ 12 | pagesDir: resolve('src', 'pages'), 13 | layouts: { 14 | default: resolve('src', 'layouts', 'default', 'default.tsx'), 15 | }, 16 | }), 17 | qwikVite(/* VITE_QWIK */), 18 | /* VITE_PLUGINS */ 19 | ], 20 | }; 21 | }); 22 | -------------------------------------------------------------------------------- /vue-nuxt/components/ListLooping.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 26 | -------------------------------------------------------------------------------- /react-next/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "12.1.5", 13 | "react": "18.1.0", 14 | "react-dom": "18.1.0", 15 | "usehooks-ts": "^2.5.3" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "17.0.31", 19 | "@types/react": "18.0.8", 20 | "@types/react-dom": "18.0.3", 21 | "eslint": "8.14.0", 22 | "eslint-config-next": "12.1.5", 23 | "typescript": "4.6.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /react/src/components/ListLooping.tsx: -------------------------------------------------------------------------------- 1 | const cats = [ 2 | { id: "J---aiyznGQ", name: "Keyboard Cat" }, 3 | { id: "z_AbfPXTKms", name: "Maru" }, 4 | { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" }, 5 | ]; 6 | 7 | const ListLooping = () => { 8 | return ( 9 | <> 10 |

The Famous Cats of YouTube

11 | 20 | 21 | ); 22 | }; 23 | 24 | export default ListLooping; 25 | -------------------------------------------------------------------------------- /angular/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | -------------------------------------------------------------------------------- /qwik/src/components/page/page.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from '@builder.io/qwik'; 2 | import { useHeadMeta, usePage } from '@builder.io/qwik-city'; 3 | import NotFound from '../../layouts/not-found/not-found'; 4 | 5 | export const Page = component$(() => { 6 | const page = usePage(); 7 | if (page) { 8 | const attrs = page.attributes; 9 | const Layout = page.layout; 10 | const Content = page.content; 11 | 12 | useHeadMeta({ 13 | title: attrs.title + ' - Qwik', 14 | description: attrs.description, 15 | }); 16 | 17 | return ( 18 | 19 | 20 | 21 | ); 22 | } 23 | return ; 24 | }); 25 | -------------------------------------------------------------------------------- /web/src/components/Logo.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Framework, getLogo } from "../utils/components" 3 | import { classNames } from "../utils/helpers" 4 | 5 | export interface Props { 6 | framework: Framework 7 | className?: string 8 | } 9 | 10 | const { framework, className = "flex" } = Astro.props 11 | --- 12 | 13 |
19 | {framework 26 |
27 | -------------------------------------------------------------------------------- /web/src/components/astro/AstroComponents.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Components } from "../../utils/components" 3 | import HelloWorld from "./HelloWorld.astro" 4 | import Styling from "./Styling.astro" 5 | import Props from "./Props.astro" 6 | import HTML from "./HTML.astro" 7 | 8 | interface Props { 9 | currentComponent: Components 10 | } 11 | 12 | const { currentComponent } = Astro.props 13 | --- 14 | 15 |
16 | {currentComponent === Components.HelloWorld && } 17 | {currentComponent === Components.Styling && } 18 | {currentComponent === Components.Props && } 19 | {currentComponent === Components.HTML && } 20 |
21 | -------------------------------------------------------------------------------- /app/packages/tsconfig/nextjs.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Next.js", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "target": "es5", 7 | "lib": ["dom", "dom.iterable", "esnext"], 8 | "allowJs": true, 9 | "skipLibCheck": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "noEmit": true, 13 | "incremental": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "jsx": "preserve" 19 | }, 20 | "include": ["src", "next-env.d.ts"], 21 | "exclude": ["node_modules"] 22 | } 23 | -------------------------------------------------------------------------------- /angular/src/app/conditional-rendering/conditional-rendering.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-conditional-rendering', 5 | template: ` 6 |

{{ x }} is greater than 10

7 | 8 | 9 |

{{ x }} is less than 5

10 | 11 | 12 | 13 |

{{ x }} is between 5 and 10

14 | 15 | `, 16 | changeDetection: ChangeDetectionStrategy.OnPush, 17 | }) 18 | export class ConditionalRenderingComponent { 19 | x = Math.floor(Math.random() * 15); 20 | } 21 | -------------------------------------------------------------------------------- /app/apps/docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev --port 3001", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "12.3.1", 13 | "react": "18.2.0", 14 | "react-dom": "18.2.0", 15 | "ui": "*" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.0.0", 19 | "eslint": "7.32.0", 20 | "eslint-config-custom": "*", 21 | "next-transpile-modules": "9.0.0", 22 | "tsconfig": "*", 23 | "@types/node": "^17.0.12", 24 | "@types/react": "18.0.17", 25 | "typescript": "^4.5.3" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /web/src/components/vue/ListLooping.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 27 | -------------------------------------------------------------------------------- /vue/src/components/ListLooping.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 27 | -------------------------------------------------------------------------------- /web/src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Sidebar from "../components/SidebarReact" 3 | import { Components, Framework } from "../utils/components" 4 | import MinimalLayout from "./MinimalLayout.astro" 5 | import MainContent from "../components/MainContent.astro" 6 | 7 | export interface Props { 8 | title: string 9 | framework?: Framework 10 | component?: Components 11 | } 12 | 13 | const { 14 | title, 15 | component = Components.HelloWorld, 16 | framework = "React", 17 | } = Astro.props 18 | --- 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /web/src/pages/astro/[id].astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { componentsList } from "../../utils/components" 3 | import Layout from "../../layouts/Layout.astro" 4 | import AstroComponents from "../../components/astro/AstroComponents.astro" 5 | 6 | export function getStaticPaths() { 7 | // Astro doesn't have state management, so only include first 4 components 8 | const astroComponents = componentsList.slice(0, 4) 9 | return astroComponents.map((component) => ({ params: { id: component } })) 10 | } 11 | 12 | const { id } = Astro.params 13 | --- 14 | 15 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /angular/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular/src/app/navbar/navbar.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /web/src/components/react/ListLooping.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const cats = [ 4 | { id: "J---aiyznGQ", name: "Keyboard Cat" }, 5 | { id: "z_AbfPXTKms", name: "Maru" }, 6 | { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" }, 7 | ] 8 | 9 | const ListLooping = () => { 10 | return ( 11 | <> 12 |

The Famous Cats of YouTube

13 | 24 | 25 | ) 26 | } 27 | 28 | export default ListLooping 29 | -------------------------------------------------------------------------------- /qwik/src/root.tsx: -------------------------------------------------------------------------------- 1 | import { App } from './components/app/app'; 2 | 3 | import './global.css'; 4 | 5 | export const Root = () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | const Head = () => ( 19 | <> 20 | 21 | 22 | Qwik Basic Components 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /web/src/components/preact/ListLooping.jsx: -------------------------------------------------------------------------------- 1 | import { h } from "preact" 2 | 3 | const cats = [ 4 | { id: "J---aiyznGQ", name: "Keyboard Cat" }, 5 | { id: "z_AbfPXTKms", name: "Maru" }, 6 | { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" }, 7 | ] 8 | 9 | const ListLooping = () => { 10 | return ( 11 | <> 12 |

The Famous Cats of YouTube

13 | 24 | 25 | ) 26 | } 27 | 28 | export default ListLooping 29 | -------------------------------------------------------------------------------- /qwik/src/components/DependentVariables/DependentVariables.tsx: -------------------------------------------------------------------------------- 1 | import { component$, useStore, useWatch$ } from "@builder.io/qwik"; 2 | 3 | const DependentVariables = component$(() => { 4 | const store = useStore({ count: 1, doubled: 2, quadrupled: 4 }); 5 | 6 | useWatch$((track) => { 7 | const count = track(store, "count"); 8 | store.doubled = 2 * count; 9 | store.quadrupled = 4 * count; 10 | }); 11 | 12 | return ( 13 | <> 14 | 15 |

16 | {store.count} * 2 = {store.doubled} 17 |

18 |

19 | {store.doubled} * 2 = {store.quadrupled} 20 |

21 | 22 | ); 23 | }); 24 | 25 | export default DependentVariables; 26 | -------------------------------------------------------------------------------- /angular/src/app/navbar/navbar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NavbarComponent } from './navbar.component'; 4 | 5 | describe('NavbarComponent', () => { 6 | let component: NavbarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ NavbarComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NavbarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Frameworks 2 | 3 | A collection of simple components in each of the leading frontend web frameworks. So far, covering React, Vue, Angular, Svelte, Solid, Qwik and Astro. The components are inspired by the examples provided by Svelte in their [playground]( https://svelte.dev/examples/hello-world). 4 | 5 | The examples include the following basic use cases: 6 | - Hello World 7 | - Styling 8 | - Nesting Components 9 | - Passing Props 10 | - Basic Variables 11 | - Dependent Variables (updated when other values changes) 12 | - Conditional Rendering 13 | - List Looping 14 | 15 | I'm a Next.js web developer open to exploring other libraries and frameworks to use for building web apps. I'll eventually be journaling my experience with exploring each framework in a blog. -------------------------------------------------------------------------------- /react-next/src/components/ListLooping/ListLooping.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const cats = [ 4 | { id: "J---aiyznGQ", name: "Keyboard Cat" }, 5 | { id: "z_AbfPXTKms", name: "Maru" }, 6 | { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" }, 7 | ]; 8 | 9 | const ListLooping: React.FC = () => { 10 | return ( 11 | <> 12 |

The Famous Cats of YouTube

13 | 24 | 25 | ); 26 | }; 27 | 28 | export default ListLooping; 29 | -------------------------------------------------------------------------------- /vue-nuxt/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # yarn 11 | yarn install 12 | 13 | # npm 14 | npm install 15 | 16 | # pnpm 17 | pnpm install --shamefully-hoist 18 | ``` 19 | 20 | ## Development Server 21 | 22 | Start the development server on http://localhost:3000 23 | 24 | ```bash 25 | npm run dev 26 | ``` 27 | 28 | ## Production 29 | 30 | Build the application for production: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | Locally preview production build: 37 | 38 | ```bash 39 | npm run preview 40 | ``` 41 | 42 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information. 43 | -------------------------------------------------------------------------------- /qwik/src/components/HelloWorld/HelloWorld.tsx: -------------------------------------------------------------------------------- 1 | import { component$, useStore } from "@builder.io/qwik"; 2 | 3 | const HelloWorld = component$(() => { 4 | const store = useStore({ name: "world" }); 5 | return

Hello {store.name}!

; 6 | }); 7 | 8 | export default HelloWorld; 9 | 10 | // const App = component$(() => { 11 | // const store = useStore({ a: 0, b: 0, c: 0 }); 12 | 13 | // return ( 14 | // <> 15 | // 16 | // 17 | // 18 | // {JSON.stringify(store)} 19 | 20 | // 21 | // 22 | // 23 | // ); 24 | // }); 25 | 26 | // export default App; 27 | 28 | -------------------------------------------------------------------------------- /web/src/components/react/DependentVariables.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react" 2 | 3 | const DependentVariables = () => { 4 | const [count, setCount] = useState(1) 5 | const [doubled, setDoubled] = useState(count * 2) 6 | const [quadrupled, setQuadrupled] = useState(doubled * 2) 7 | 8 | useEffect(() => { 9 | setDoubled(count * 2) 10 | setQuadrupled(doubled * 2) 11 | }, [count, doubled]) 12 | 13 | function handleClick() { 14 | setCount(count + 1) 15 | } 16 | 17 | return ( 18 | <> 19 | 20 |

21 | {count} * 2 = {doubled} 22 |

23 |

24 | {doubled} * 2 = {quadrupled} 25 |

26 | 27 | ) 28 | } 29 | 30 | export default DependentVariables 31 | -------------------------------------------------------------------------------- /react/src/components/DependentVariables.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | const DependentVariables = () => { 4 | const [count, setCount] = useState(1); 5 | const [doubled, setDoubled] = useState(count * 2); 6 | const [quadrupled, setQuadrupled] = useState(doubled * 2); 7 | 8 | useEffect(() => { 9 | setDoubled(count * 2); 10 | setQuadrupled(doubled * 2); 11 | }, [count, doubled]); 12 | 13 | function handleClick() { 14 | setCount(count + 1); 15 | } 16 | 17 | return ( 18 | <> 19 | 20 |

21 | {count} * 2 = {doubled} 22 |

23 |

24 | {doubled} * 2 = {quadrupled} 25 |

26 | 27 | ); 28 | }; 29 | 30 | export default DependentVariables; 31 | -------------------------------------------------------------------------------- /app/apps/web/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | import tailwind from "@astrojs/tailwind"; 3 | import solidJs from "@astrojs/solid-js"; 4 | import svelte from "@astrojs/svelte"; 5 | import vue from "@astrojs/vue"; 6 | import react from "@astrojs/react"; 7 | import preact from "@astrojs/preact"; 8 | 9 | import lit from "@astrojs/lit"; 10 | 11 | // https://astro.build/config 12 | export default defineConfig({ 13 | integrations: [ 14 | tailwind(), 15 | // Configure JSX renderers with file patterns to avoid conflicts 16 | react({ 17 | include: ['**/React.tsx'] 18 | }), 19 | preact({ 20 | include: ['**/Preact.tsx'] 21 | }), 22 | solidJs({ 23 | include: ['**/Solid.tsx'] 24 | }), 25 | svelte(), 26 | vue(), 27 | lit() 28 | ] 29 | }); -------------------------------------------------------------------------------- /qwik/src/components/ListLooping/ListLooping.tsx: -------------------------------------------------------------------------------- 1 | import { component$, useStore } from "@builder.io/qwik"; 2 | 3 | const ListLooping = component$(() => { 4 | const { cats } = useStore({ 5 | cats: [ 6 | { id: "J---aiyznGQ", name: "Keyboard Cat" }, 7 | { id: "z_AbfPXTKms", name: "Maru" }, 8 | { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" }, 9 | ], 10 | }); 11 | return ( 12 | <> 13 |

The Famous Cats of YouTube

14 | 23 | 24 | ); 25 | }); 26 | 27 | export default ListLooping; 28 | -------------------------------------------------------------------------------- /web/src/components/solid/DependentVariables.jsx: -------------------------------------------------------------------------------- 1 | import { createEffect, createSignal } from "solid-js" 2 | 3 | const DependentVariables = () => { 4 | const [count, setCount] = createSignal(1) 5 | const [doubled, setDoubled] = createSignal(count() * 2) 6 | const [quadrupled, setQuadrupled] = createSignal(doubled() * 2) 7 | 8 | createEffect(() => { 9 | setDoubled(count() * 2) 10 | setQuadrupled(doubled() * 2) 11 | }) 12 | 13 | function handleClick() { 14 | setCount(count() + 1) 15 | } 16 | 17 | return ( 18 | <> 19 | 20 |

21 | {count} * 2 = {doubled} 22 |

23 |

24 | {doubled} * 2 = {quadrupled} 25 |

26 | 27 | ) 28 | } 29 | 30 | export default DependentVariables 31 | -------------------------------------------------------------------------------- /angular/src/app/page-content/page-content.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PageContentComponent } from './page-content.component'; 4 | 5 | describe('PageContentComponent', () => { 6 | let component: PageContentComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ PageContentComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PageContentComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /react-next/src/components/DependentVariables/DependentVariables.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | const DependentVariables: React.FC = () => { 4 | const [count, setCount] = useState(1); 5 | const [doubled, setDoubled] = useState(count * 2); 6 | const [quadrupled, setQuadrupled] = useState(doubled * 2); 7 | 8 | useEffect(() => { 9 | setDoubled(count * 2); 10 | setQuadrupled(doubled * 2); 11 | }, [count, doubled]); 12 | 13 | function handleClick() { 14 | setCount(count + 1); 15 | } 16 | 17 | return ( 18 | <> 19 | 20 |

21 | {count} * 2 = {doubled} 22 |

23 |

24 | {doubled} * 2 = {quadrupled} 25 |

26 | 27 | ); 28 | }; 29 | 30 | export default DependentVariables; 31 | -------------------------------------------------------------------------------- /web/src/components/preact/DependentVariables.jsx: -------------------------------------------------------------------------------- 1 | import { h } from "preact" 2 | import { useEffect, useState } from "preact/hooks" 3 | 4 | const DependentVariables = () => { 5 | const [count, setCount] = useState(1) 6 | const [doubled, setDoubled] = useState(count * 2) 7 | const [quadrupled, setQuadrupled] = useState(doubled * 2) 8 | 9 | useEffect(() => { 10 | setDoubled(count * 2) 11 | setQuadrupled(doubled * 2) 12 | }, [count, doubled]) 13 | 14 | function handleClick() { 15 | setCount(count + 1) 16 | } 17 | 18 | return ( 19 | <> 20 | 21 |

22 | {count} * 2 = {doubled} 23 |

24 |

25 | {doubled} * 2 = {quadrupled} 26 |

27 | 28 | ) 29 | } 30 | 31 | export default DependentVariables 32 | -------------------------------------------------------------------------------- /angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.angular/cache 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /solid/src/components/ListLooping/ListLooping.tsx: -------------------------------------------------------------------------------- 1 | import { Component, For } from "solid-js"; 2 | 3 | const cats = [ 4 | { id: "J---aiyznGQ", name: "Keyboard Cat" }, 5 | { id: "z_AbfPXTKms", name: "Maru" }, 6 | { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" }, 7 | ]; 8 | 9 | const ListLooping: Component = () => { 10 | return ( 11 | <> 12 |

The Famous Cats of YouTube

13 | 27 | 28 | ); 29 | }; 30 | 31 | export default ListLooping; 32 | -------------------------------------------------------------------------------- /app/apps/web/src/layouts/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | export interface Props { 3 | title: string; 4 | } 5 | 6 | const { title } = Astro.props; 7 | --- 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | {title} 17 | 18 | 19 | 20 | 21 | 22 | 32 | -------------------------------------------------------------------------------- /web/src/components/solid/ListLooping.jsx: -------------------------------------------------------------------------------- 1 | /** @jsxImportSource solid-js */ 2 | import { For } from "solid-js" 3 | 4 | const cats = [ 5 | { id: "J---aiyznGQ", name: "Keyboard Cat" }, 6 | { id: "z_AbfPXTKms", name: "Maru" }, 7 | { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" }, 8 | ] 9 | 10 | const ListLooping = () => { 11 | return ( 12 | <> 13 |

The Famous Cats of YouTube

14 | 28 | 29 | ) 30 | } 31 | 32 | export default ListLooping 33 | -------------------------------------------------------------------------------- /solid/src/components/DependentVariables/DependentVariables.tsx: -------------------------------------------------------------------------------- 1 | import { Component, createEffect, createSignal } from "solid-js"; 2 | 3 | const DependentVariables: Component = () => { 4 | const [count, setCount] = createSignal(1); 5 | const [doubled, setDoubled] = createSignal(count() * 2); 6 | const [quadrupled, setQuadrupled] = createSignal(doubled() * 2); 7 | 8 | createEffect(() => { 9 | setDoubled(count() * 2); 10 | setQuadrupled(doubled() * 2); 11 | }); 12 | 13 | function handleClick() { 14 | setCount(count() + 1); 15 | } 16 | 17 | return ( 18 | <> 19 | 20 |

21 | {count} * 2 = {doubled} 22 |

23 |

24 | {doubled} * 2 = {quadrupled} 25 |

26 | 27 | ); 28 | }; 29 | 30 | export default DependentVariables; 31 | -------------------------------------------------------------------------------- /angular/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting(), 21 | ); 22 | 23 | // Then we find all the tests. 24 | const context = require.context('./', true, /\.spec\.ts$/); 25 | // And load the modules. 26 | context.keys().map(context); 27 | -------------------------------------------------------------------------------- /web/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], 4 | theme: { 5 | extend: { 6 | colors: { 7 | react: "#61DAFB", 8 | vue: "#41B883", 9 | svelte: "#FF3E00", 10 | solid: "#3763A3", 11 | preact: "#673AB8", 12 | lit: "#00E8FF", 13 | }, 14 | }, 15 | }, 16 | safelist: [ 17 | "text-react", 18 | "text-vue", 19 | "text-solid", 20 | "text-svelte", 21 | "text-preact", 22 | "text-lit", 23 | "ring-react", 24 | "ring-vue", 25 | "ring-solid", 26 | "ring-svelte", 27 | "ring-preact", 28 | "ring-lit", 29 | "bg-react", 30 | "bg-vue", 31 | "bg-solid", 32 | "bg-svelte", 33 | "bg-preact", 34 | "bg-lit", 35 | ], 36 | plugins: [], 37 | }; 38 | -------------------------------------------------------------------------------- /web/public/logos/lit-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Lit 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /components/overrides/react-native/src/components/error-boundary.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text } from 'react-native'; 3 | 4 | // Still has to be a class component :( 5 | // https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries 6 | export default class ErrorBoundary extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { hasError: false }; 10 | } 11 | 12 | static getDerivedStateFromError(error) { 13 | return { hasError: true }; 14 | } 15 | 16 | componentDidCatch(error, errorInfo) { 17 | console.error('Error rendering', error, errorInfo); 18 | } 19 | 20 | render() { 21 | if (this.state.hasError) { 22 | return ( 23 | Error rendering block 24 | ); 25 | } 26 | 27 | return this.props.children; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /vue-nuxt/sections/PageContent.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 23 | 24 | -------------------------------------------------------------------------------- /app/apps/web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@example/basics", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "dev": "astro dev", 8 | "start": "astro dev", 9 | "build": "astro build", 10 | "preview": "astro preview", 11 | "astro": "astro" 12 | }, 13 | "dependencies": { 14 | "@astrojs/lit": "^4.3.0", 15 | "@astrojs/preact": "^4.1.3", 16 | "@astrojs/react": "^4.4.2", 17 | "@astrojs/solid-js": "^5.1.3", 18 | "@astrojs/svelte": "^7.2.2", 19 | "@astrojs/tailwind": "^6.0.2", 20 | "@astrojs/vue": "^5.1.3", 21 | "@webcomponents/template-shadowroot": "^0.2.1", 22 | "astro": "^5.15.8", 23 | "lit": "^3.2.1", 24 | "preact": "^10.24.3", 25 | "react": "^18.3.1", 26 | "react-dom": "^18.3.1", 27 | "solid-js": "^1.9.3", 28 | "svelte": "^5.15.1", 29 | "tailwindcss": "^3.4.15", 30 | "vue": "^3.5.13" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /web/public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /app/apps/web/public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /angular/src/app/navbar/navbar.component.css: -------------------------------------------------------------------------------- 1 | .links { 2 | display: flex; 3 | flex-direction: column; 4 | background-color: rgba(67, 72, 229, 0.4); 5 | padding: 16px 8px; 6 | height: 100vh; 7 | overflow-y: scroll; 8 | } 9 | .links button { 10 | background-color: transparent; 11 | color: rgb(37, 33, 151); 12 | margin: 12px; 13 | padding: 12px 6px; 14 | border-radius: 12px; 15 | text-transform: uppercase; 16 | list-style: none; 17 | cursor: pointer; 18 | border: 2px solid rgb(37, 33, 151); 19 | } 20 | 21 | .links button:hover { 22 | background-color: rgb(37, 33, 151); 23 | color: rgba(255, 255, 255, 0.8); 24 | box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); 25 | } 26 | 27 | .close { 28 | display: none; 29 | } 30 | 31 | @media screen and (max-width: 480px) { 32 | .links { 33 | display: none; 34 | width: 100%; 35 | height: 100%; 36 | } 37 | 38 | .close { 39 | display: flex; 40 | justify-content: flex-end; 41 | padding-right: 16px; 42 | } 43 | } -------------------------------------------------------------------------------- /svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte", 3 | "version": "0.0.1", 4 | "scripts": { 5 | "dev": "svelte-kit dev", 6 | "build": "svelte-kit build", 7 | "package": "svelte-kit package", 8 | "preview": "svelte-kit preview", 9 | "prepare": "svelte-kit sync", 10 | "check": "svelte-check --tsconfig ./tsconfig.json", 11 | "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", 12 | "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .", 13 | "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ." 14 | }, 15 | "devDependencies": { 16 | "@sveltejs/adapter-auto": "next", 17 | "@sveltejs/kit": "next", 18 | "prettier": "^2.5.1", 19 | "prettier-plugin-svelte": "^2.5.0", 20 | "svelte": "^3.44.0", 21 | "svelte-check": "^2.2.6", 22 | "svelte-preprocess": "^4.10.1", 23 | "tslib": "^2.3.1", 24 | "typescript": "~4.6.2" 25 | }, 26 | "type": "module" 27 | } 28 | -------------------------------------------------------------------------------- /angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "forceConsistentCasingInFileNames": true, 8 | "strict": true, 9 | "noImplicitOverride": true, 10 | "noPropertyAccessFromIndexSignature": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "sourceMap": true, 14 | "declaration": false, 15 | "downlevelIteration": true, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "node", 18 | "importHelpers": true, 19 | "target": "es2017", 20 | "module": "es2020", 21 | "lib": [ 22 | "es2020", 23 | "dom" 24 | ] 25 | }, 26 | "angularCompilerOptions": { 27 | "enableI18nLegacyMessageIdFormat": false, 28 | "strictInjectionParameters": true, 29 | "strictInputAccessModifiers": true, 30 | "strictTemplates": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@builder.io/basic-example", 3 | "version": "0.0.1", 4 | "license": "MIT", 5 | "scripts": { 6 | "mitosis": "mitosis build", 7 | "build": "yarn run mitosis", 8 | "start": "watch 'yarn run mitosis' ./src ./overrides", 9 | "test": "jest" 10 | }, 11 | "dependencies": { 12 | "@builder.io/mitosis": "^0.0.71", 13 | "@builder.io/mitosis-cli": "^0.0.31", 14 | "node-fetch": "^2.6.1", 15 | "seedrandom": "^3.0.5" 16 | }, 17 | "devDependencies": { 18 | "@builder.io/eslint-plugin-mitosis": "^0.0.10", 19 | "@types/jest": "^27.4.0", 20 | "@types/node-fetch": "^2.5.12", 21 | "@typescript-eslint/eslint-plugin": "^5.27.1", 22 | "@typescript-eslint/parser": "^5.27.1", 23 | "eslint": "^8.17.0", 24 | "jest": "^27.5.1", 25 | "jest-fetch-mock": "^3.0.3", 26 | "prettier": "^2.5.0", 27 | "tailwindcss": "^3.1.8", 28 | "ts-jest": "^27.1.3", 29 | "typescript": "^4.7.3", 30 | "watch": "^1.0.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /web/public/astro.json: -------------------------------------------------------------------------------- 1 | {"astro":{"AstroComponents":"---\nimport { Components } from \"../../utils/components\"\nimport HelloWorld from \"./HelloWorld.astro\"\nimport Styling from \"./Styling.astro\"\nimport Props from \"./Props.astro\"\nimport HTML from \"./HTML.astro\"\n\ninterface Props {\n currentComponent: Components\n}\n\nconst { currentComponent } = Astro.props\n---\n\n
\n {currentComponent === Components.HelloWorld && }\n {currentComponent === Components.Styling && }\n {currentComponent === Components.Props && }\n {currentComponent === Components.HTML && }\n
\n","HTML":"---\nconst htmlString = `here's some HTML!!!`\n---\n\n

\n","HelloWorld":"

Hello world!

\n","Props":"---\ninterface Props {\n answer?: string\n}\n\nconst { answer = \"a mystery\" } = Astro.props\n---\n\n

The answer is {answer}

\n","Styling":"

\n Styled!\n

\n"}} -------------------------------------------------------------------------------- /qwik/src/sections/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .links { 2 | display: flex; 3 | flex-direction: column; 4 | background-color: rgba(67, 72, 229, 0.4); 5 | padding: 16px 8px; 6 | height: 100vh; 7 | overflow-y: scroll; 8 | } 9 | .links button { 10 | background-color: transparent; 11 | color: rgb(37, 33, 151); 12 | font-weight: 600; 13 | margin: 12px; 14 | padding: 12px 6px; 15 | border-radius: 12px; 16 | text-transform: uppercase; 17 | list-style: none; 18 | cursor: pointer; 19 | 20 | border: 2px solid rgb(37, 33, 151); 21 | } 22 | 23 | .links button:hover { 24 | background-color: rgb(37, 33, 151); 25 | color: rgba(255, 255, 255, 0.8); 26 | box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); 27 | } 28 | 29 | .close { 30 | display: none; 31 | } 32 | 33 | @media screen and (max-width: 480px) { 34 | .links { 35 | display: none; 36 | width: 100%; 37 | height: 100%; 38 | } 39 | 40 | .close { 41 | display: flex; 42 | justify-content: flex-end; 43 | padding-right: 16px; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /qwik/src/components/sidebar/sidebar.css: -------------------------------------------------------------------------------- 1 | .links { 2 | display: flex; 3 | flex-direction: column; 4 | background-color: rgba(67, 72, 229, 0.4); 5 | padding: 16px 8px; 6 | height: 100vh; 7 | overflow-y: scroll; 8 | } 9 | .links button { 10 | background-color: transparent; 11 | color: rgb(37, 33, 151); 12 | font-weight: 600; 13 | margin: 12px; 14 | padding: 12px 6px; 15 | border-radius: 12px; 16 | text-transform: uppercase; 17 | list-style: none; 18 | cursor: pointer; 19 | 20 | border: 2px solid rgb(37, 33, 151); 21 | } 22 | 23 | .links button:hover { 24 | background-color: rgb(37, 33, 151); 25 | color: rgba(255, 255, 255, 0.8); 26 | box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); 27 | } 28 | 29 | .close { 30 | display: none; 31 | } 32 | 33 | @media screen and (max-width: 480px) { 34 | 35 | 36 | .links { 37 | display: none; 38 | width: 100%; 39 | height: 100%; 40 | } 41 | 42 | .close { 43 | display: flex; 44 | justify-content: flex-end; 45 | padding-right: 16px; 46 | } 47 | } -------------------------------------------------------------------------------- /solid/src/sections/Navbar/Navbar.module.css: -------------------------------------------------------------------------------- 1 | .links { 2 | display: flex; 3 | flex-direction: column; 4 | background-color: rgba(67, 72, 229, 0.4); 5 | padding: 16px 8px; 6 | height: 100vh; 7 | overflow-y: scroll; 8 | } 9 | .links button { 10 | background-color: transparent; 11 | color: rgb(37, 33, 151); 12 | font-weight: 600; 13 | margin: 12px; 14 | padding: 12px 6px; 15 | border-radius: 12px; 16 | text-transform: uppercase; 17 | list-style: none; 18 | cursor: pointer; 19 | 20 | border: 2px solid rgb(37, 33, 151); 21 | } 22 | 23 | .links button:hover { 24 | background-color: rgb(37, 33, 151); 25 | color: rgba(255, 255, 255, 0.8); 26 | box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); 27 | } 28 | 29 | .close { 30 | display: none; 31 | } 32 | 33 | @media screen and (max-width: 480px) { 34 | 35 | 36 | .links { 37 | display: none; 38 | width: 100%; 39 | height: 100%; 40 | } 41 | 42 | .close { 43 | display: flex; 44 | justify-content: flex-end; 45 | padding-right: 16px; 46 | } 47 | } -------------------------------------------------------------------------------- /angular/src/app/list-looping/list-looping.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-list-looping', 5 | template: ` 6 |

The Famous Cats of YouTube

7 | 17 | `, 18 | changeDetection: ChangeDetectionStrategy.OnPush, 19 | }) 20 | export class ListLoopingComponent { 21 | cats = [ 22 | { id: 'J---aiyznGQ', name: 'Keyboard Cat' }, 23 | { id: 'z_AbfPXTKms', name: 'Maru' }, 24 | { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }, 25 | ]; 26 | } 27 | -------------------------------------------------------------------------------- /react-next/src/sections/Navbar/Navbar.module.css: -------------------------------------------------------------------------------- 1 | .links { 2 | display: flex; 3 | flex-direction: column; 4 | background-color: rgba(67, 72, 229, 0.4); 5 | padding: 16px 8px; 6 | height: 100vh; 7 | overflow-y: scroll; 8 | } 9 | .links button { 10 | background-color: transparent; 11 | color: rgb(37, 33, 151); 12 | font-weight: 600; 13 | font-weight: 600; 14 | margin: 12px; 15 | padding: 12px 6px; 16 | border-radius: 12px; 17 | text-transform: uppercase; 18 | list-style: none; 19 | cursor: pointer; 20 | border: 2px solid rgb(37, 33, 151); 21 | } 22 | 23 | .links button:hover { 24 | background-color: rgba(37, 33, 151); 25 | color: rgba(255, 255, 255, 0.8); 26 | box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); 27 | } 28 | 29 | .close { 30 | display: none; 31 | } 32 | 33 | @media screen and (max-width: 480px) { 34 | 35 | 36 | .links { 37 | display: none; 38 | width: 100%; 39 | height: 100%; 40 | } 41 | 42 | .close { 43 | display: flex; 44 | justify-content: flex-end; 45 | padding-right: 16px; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /svelte/README.md: -------------------------------------------------------------------------------- 1 | # create-svelte 2 | 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). 4 | 5 | ## Creating a project 6 | 7 | If you're seeing this, you've probably already done this step. Congrats! 8 | 9 | ```bash 10 | # create a new project in the current directory 11 | npm init svelte 12 | 13 | # create a new project in my-app 14 | npm init svelte my-app 15 | ``` 16 | 17 | ## Developing 18 | 19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: 20 | 21 | ```bash 22 | npm run dev 23 | 24 | # or start the server and open the app in a new browser tab 25 | npm run dev -- --open 26 | ``` 27 | 28 | ## Building 29 | 30 | To create a production version of your app: 31 | 32 | ```bash 33 | npm run build 34 | ``` 35 | 36 | You can preview the production build with `npm run preview`. 37 | 38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. 39 | -------------------------------------------------------------------------------- /react-next/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # Simple Mitosis project 2 | 3 | ### Setup 4 | 5 | ```bash 6 | # install 7 | yarn install 8 | 9 | # build 10 | yarn run build 11 | 12 | # run dev server that watches for changes 13 | yarn run start 14 | 15 | # test 16 | yarn run test 17 | ``` 18 | 19 | ### Project structure 20 | 21 | Here are some key things to look at: 22 | 23 | - `src` contains your Mitosis source code 24 | - `output` contains per-target output of the project 25 | - You will notice `.lite.tsx` files _in_ your output. Those are a human-readable Mitosis components. Think of them as a reference point for you to debug more easily, since the actual JS output is minified and thus difficult to read. 26 | - `mitosis.config.js` contains general and per-target configuration. It is used by `mitosis build`. 27 | - `overrides` contains a per-target folder that mimicks the structure of `src`, and will completely swap out any files with identical names. Example: since we have defined `overrides/react-native/src/functions/is-react-native.ts`, it will override `src/functions/is-react-native.ts` in `output/react-native/src/functions/is-react-native.js` -------------------------------------------------------------------------------- /react/src/components/Custom/Examples/RainbowTypewriter/RainbowTypewriter.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import ReactTyper from "../../ReactTyper"; 3 | 4 | // Types and variables for the rainbow typing animation 5 | type Rainbow = 6 | | "red" 7 | | "orange" 8 | | "yellow" 9 | | "green" 10 | | "blue" 11 | | "sky" 12 | | "violet"; 13 | const rainbowColors: Rainbow[] = [ 14 | "red", 15 | "orange", 16 | "yellow", 17 | "green", 18 | "blue", 19 | "sky", 20 | "violet", 21 | ]; 22 | const rainbowWords = rainbowColors.map((word) => `${word}...`); 23 | 24 | const RainbowTypewriter = () => { 25 | const [colorIndex, setColorIndex] = useState(0); 26 | return ( 27 |

28 | Rainbow typewriter:{" "} 29 | 30 | { 35 | setColorIndex(colorIndex + 1); 36 | }} 37 | /> 38 | 39 |

40 | ); 41 | }; 42 | 43 | export default RainbowTypewriter; 44 | -------------------------------------------------------------------------------- /react-next/src/components/Custom/Examples/RainbowTypewriter/RainbowTypewriter.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import ReactTyper from "../../ReactTyper"; 3 | 4 | // Types and variables for the rainbow typing animation 5 | type Rainbow = 6 | | "red" 7 | | "orange" 8 | | "yellow" 9 | | "green" 10 | | "blue" 11 | | "sky" 12 | | "violet"; 13 | const rainbowColors: Rainbow[] = [ 14 | "red", 15 | "orange", 16 | "yellow", 17 | "green", 18 | "blue", 19 | "sky", 20 | "violet", 21 | ]; 22 | const rainbowWords = rainbowColors.map((word) => `${word}...`); 23 | 24 | const RainbowTypewriter = () => { 25 | const [colorIndex, setColorIndex] = useState(0); 26 | return ( 27 |

28 | Rainbow typewriter:{" "} 29 | 30 | { 35 | setColorIndex(colorIndex + 1); 36 | }} 37 | /> 38 | 39 |

40 | ); 41 | }; 42 | 43 | export default RainbowTypewriter; 44 | -------------------------------------------------------------------------------- /web/src/pages/404.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import MinimalLayout from "../layouts/MinimalLayout.astro" 3 | import FrameworkCard from "../components/FrameworkCard.astro" 4 | --- 5 | 6 | 7 |
8 |

9 | Welcome to Astro 13 |

14 |
    18 |
  • 19 | 20 |
    • 21 |
  • 22 | 23 |
    • 24 |
  • 25 | 26 |
    • 27 |
28 |
29 | 30 | -------------------------------------------------------------------------------- /angular/README.md: -------------------------------------------------------------------------------- 1 | # Angular 2 | 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.3. 4 | 5 | ## Development server 6 | 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 8 | 9 | ## Code scaffolding 10 | 11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 12 | 13 | ## Build 14 | 15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. 16 | 17 | ## Running unit tests 18 | 19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 20 | 21 | ## Running end-to-end tests 22 | 23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. 24 | 25 | ## Further help 26 | 27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. 28 | -------------------------------------------------------------------------------- /qwik/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | node: true, 6 | }, 7 | extends: [ 8 | 'eslint:recommended', 9 | 'plugin:@typescript-eslint/recommended', 10 | 'plugin:qwik/recommended', 11 | ], 12 | parser: '@typescript-eslint/parser', 13 | parserOptions: { 14 | ecmaVersion: 12, 15 | sourceType: 'module', 16 | }, 17 | plugins: ['@typescript-eslint'], 18 | rules: { 19 | '@typescript-eslint/no-explicit-any': 'off', 20 | '@typescript-eslint/explicit-module-boundary-types': 'off', 21 | '@typescript-eslint/no-inferrable-types': 'off', 22 | '@typescript-eslint/no-non-null-assertion': 'off', 23 | '@typescript-eslint/no-empty-interface': 'off', 24 | '@typescript-eslint/no-namespace': 'off', 25 | '@typescript-eslint/no-empty-function': 'off', 26 | '@typescript-eslint/no-this-alias': 'off', 27 | '@typescript-eslint/ban-types': 'off', 28 | '@typescript-eslint/ban-ts-comment': 'off', 29 | 'prefer-spread': 'off', 30 | 'no-case-declarations': 'off', 31 | 'no-console': 'off', 32 | '@typescript-eslint/no-unused-vars': ['error'], 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /solid/src/containers/RainbowTypewriter/RainbowTypewriter.tsx: -------------------------------------------------------------------------------- 1 | import { Component, createEffect, createSignal } from "solid-js"; 2 | import SolidTyper from "../../components/Custom/SolidTyper"; 3 | 4 | // Types and variables for the rainbow typing animation 5 | type Rainbow = 6 | | "red" 7 | | "orange" 8 | | "yellow" 9 | | "green" 10 | | "blue" 11 | | "sky" 12 | | "violet"; 13 | const rainbowColors: Rainbow[] = [ 14 | "red", 15 | "orange", 16 | "yellow", 17 | "green", 18 | "blue", 19 | "sky", 20 | "violet", 21 | ]; 22 | const rainbowWords = rainbowColors.map((word) => `${word}...`); 23 | 24 | const RainbowTypewriter: Component = () => { 25 | const [colorIndex, setColorIndex] = createSignal(0); 26 | 27 | return ( 28 |

29 | Rainbow typewriter:{" "} 30 | 31 | { 36 | setColorIndex(colorIndex() + 1); 37 | }} 38 | /> 39 | 40 |

41 | ); 42 | }; 43 | 44 | export default RainbowTypewriter; 45 | -------------------------------------------------------------------------------- /solid/README.md: -------------------------------------------------------------------------------- 1 | ## Usage 2 | 3 | Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`. 4 | 5 | This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template. 6 | 7 | ```bash 8 | $ npm install # or pnpm install or yarn install 9 | ``` 10 | 11 | ### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs) 12 | 13 | ## Available Scripts 14 | 15 | In the project directory, you can run: 16 | 17 | ### `npm dev` or `npm start` 18 | 19 | Runs the app in the development mode.
20 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 21 | 22 | The page will reload if you make edits.
23 | 24 | ### `npm run build` 25 | 26 | Builds the app for production to the `dist` folder.
27 | It correctly bundles Solid in production mode and optimizes the build for the best performance. 28 | 29 | The build is minified and the filenames include the hashes.
30 | Your app is ready to be deployed! 31 | 32 | ## Deployment 33 | 34 | You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.) 35 | -------------------------------------------------------------------------------- /app/apps/web/src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from "../layouts/Layout.astro"; 3 | import Svelte from "../components/Svelte.svelte"; 4 | import Vue from "../components/Vue.vue"; 5 | import Preact from "../components/Preact"; 6 | import React from "../components/React"; 7 | import Solid from "../components/Solid"; 8 | --- 9 | 10 | 11 |
12 |

Welcome to Astro

13 |
    14 |
    • 15 |
    • 16 |
    • 17 |
    • 18 |
    • 19 |
20 |
21 | 22 | 23 | 39 | -------------------------------------------------------------------------------- /angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development", 9 | "test": "ng test" 10 | }, 11 | "private": true, 12 | "dependencies": { 13 | "@angular/animations": "~13.0.0", 14 | "@angular/common": "~13.0.0", 15 | "@angular/compiler": "~13.0.0", 16 | "@angular/core": "~13.0.0", 17 | "@angular/forms": "~13.0.0", 18 | "@angular/platform-browser": "~13.0.0", 19 | "@angular/platform-browser-dynamic": "~13.0.0", 20 | "@angular/router": "~13.0.0", 21 | "rxjs": "~7.4.0", 22 | "tslib": "^2.3.0", 23 | "zone.js": "~0.11.4" 24 | }, 25 | "devDependencies": { 26 | "@angular-devkit/build-angular": "~13.0.3", 27 | "@angular/cli": "~13.0.3", 28 | "@angular/compiler-cli": "~13.0.0", 29 | "@types/jasmine": "~3.10.0", 30 | "@types/node": "^12.11.1", 31 | "jasmine-core": "~3.10.0", 32 | "karma": "~6.3.0", 33 | "karma-chrome-launcher": "~3.1.0", 34 | "karma-coverage": "~2.0.3", 35 | "karma-jasmine": "~4.0.0", 36 | "karma-jasmine-html-reporter": "~1.7.0", 37 | "prettier": "2.6.2", 38 | "typescript": "~4.4.3" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /components/overrides/react-native/src/blocks/image.tsx: -------------------------------------------------------------------------------- 1 | import { Image as ReactImage, View } from 'react-native'; 2 | 3 | // Subset of Image props, many are irrelevant for native (such as altText, etc) 4 | export interface ImageProps { 5 | image: string; 6 | backgroundSize?: 'cover' | 'contain'; 7 | backgroundPosition?: string; 8 | aspectRatio?: number; 9 | width?: number; 10 | height?: number; 11 | } 12 | 13 | export default function Image(props: ImageProps) { 14 | return props.aspectRatio ? ( 15 | 16 | 21 | 27 | 28 | ) : ( 29 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /qwik/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "qwik", 3 | "description": "Starter with built-in routing, powered by Qwik City Vite.js tooling. Eslint code linting. Prettier code formatter.", 4 | "scripts": { 5 | "build": "npm run typecheck && npm run build.client && npm run build.ssr", 6 | "build.client": "vite build", 7 | "build.ssr": "vite build --ssr src/entry.server.tsx", 8 | "dev": "vite", 9 | "dev.debug": "node --inspect-brk node_modules/vite/bin/vite.js", 10 | "dev.ssr": "vite --mode ssr", 11 | "fmt": "prettier --write .", 12 | "fmt.check": "prettier --check .", 13 | "lint": "eslint \"**/*.ts*\"", 14 | "start": "npm run dev", 15 | "typecheck": "tsc --noEmit" 16 | }, 17 | "devDependencies": { 18 | "@builder.io/qwik": "0.0.24", 19 | "@builder.io/qwik-city": "0.0.12", 20 | "@types/eslint": "8.4.2", 21 | "@types/node": "latest", 22 | "@typescript-eslint/eslint-plugin": "5.27.0", 23 | "@typescript-eslint/parser": "5.27.0", 24 | "eslint": "8.16.0", 25 | "eslint-plugin-qwik": "latest", 26 | "node-fetch": "2.6.7", 27 | "prettier": "2.6.2", 28 | "typescript": "4.7.2", 29 | "vite": "2.9.9" 30 | }, 31 | "engines": { 32 | "node": ">=14" 33 | }, 34 | "homepage": "https://qwik.builder.io/", 35 | "license": "", 36 | "private": true 37 | } 38 | -------------------------------------------------------------------------------- /solid/src/containers/SentenceTypewriter/SentenceTypewriter.tsx: -------------------------------------------------------------------------------- 1 | import { Component, createSignal, For, Show } from "solid-js"; 2 | import SolidTyper from "../../components/Custom/SolidTyper"; 3 | 4 | type SentenceLine = { delay: number; sentence: string }; 5 | const sentences: SentenceLine[] = [ 6 | { delay: 100, sentence: "Keep my wife's name out your F*$%@#^ mouth!" }, 7 | { delay: 500, sentence: "It was a G.I Jane joke..." }, 8 | { 9 | delay: 1200, 10 | sentence: "Keep... my wife's name... out your... F*$%@#^... mouth!!!", 11 | }, 12 | ]; 13 | 14 | const SentenceTypewriter: Component = () => { 15 | const [showSentenceIndex, setShowSentenceIndex] = createSignal(0); 16 | 17 | function showNextSentence() { 18 | setShowSentenceIndex(showSentenceIndex() + 1); 19 | } 20 | return ( 21 |
22 | 23 | {({ delay, sentence }, i) => ( 24 | = i()}> 25 |

26 | 31 |

32 | 33 | )} 34 | 35 |
36 | ); 37 | }; 38 | 39 | export default SentenceTypewriter; 40 | -------------------------------------------------------------------------------- /web/src/components/react/ReactComponents.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import BasicVariables from "./BasicVariables" 3 | import ConditionalRendering from "./ConditionalRendering" 4 | import DependentVariables from "./DependentVariables" 5 | import HelloWorld from "./HelloWorld" 6 | import HTML from "./HTML" 7 | import ListLooping from "./ListLooping" 8 | import Props from "./Props" 9 | import Styling from "./Styling" 10 | import { Components } from "../../utils/components" 11 | 12 | const ReactComponents = ({ currentComponent }) => { 13 | return ( 14 | <> 15 | {currentComponent === Components.HelloWorld ? ( 16 | 17 | ) : currentComponent === Components.Styling ? ( 18 | 19 | ) : currentComponent === Components.Props ? ( 20 | 21 | ) : currentComponent === Components.HTML ? ( 22 | 23 | ) : currentComponent === Components.BasicVariables ? ( 24 | 25 | ) : currentComponent === Components.DependentVariables ? ( 26 | 27 | ) : currentComponent === Components.ConditionalRendering ? ( 28 | 29 | ) : ( 30 | 31 | )} 32 | 33 | ) 34 | } 35 | 36 | export default ReactComponents 37 | -------------------------------------------------------------------------------- /web/src/components/preact/PreactComponents.jsx: -------------------------------------------------------------------------------- 1 | import { h } from "preact" 2 | import BasicVariables from "./BasicVariables" 3 | import ConditionalRendering from "./ConditionalRendering" 4 | import DependentVariables from "./DependentVariables" 5 | import HelloWorld from "./HelloWorld" 6 | import HTML from "./HTML" 7 | import ListLooping from "./ListLooping" 8 | import Props from "./Props" 9 | import Styling from "./Styling" 10 | import { Components } from "../../utils/components" 11 | 12 | const PreactComponents = ({ currentComponent }) => { 13 | return ( 14 | <> 15 | {currentComponent === Components.HelloWorld ? ( 16 | 17 | ) : currentComponent === Components.Styling ? ( 18 | 19 | ) : currentComponent === Components.Props ? ( 20 | 21 | ) : currentComponent === Components.HTML ? ( 22 | 23 | ) : currentComponent === Components.BasicVariables ? ( 24 | 25 | ) : currentComponent === Components.DependentVariables ? ( 26 | 27 | ) : currentComponent === Components.ConditionalRendering ? ( 28 | 29 | ) : ( 30 | 31 | )} 32 | 33 | ) 34 | } 35 | 36 | export default PreactComponents 37 | -------------------------------------------------------------------------------- /qwik/src/pages/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome 3 | --- 4 | 5 | # Welcome 6 | 7 | Welcome to the fabolous Qwik City. QwikCity is our official kit to build amazing sites: 8 | 9 | - 🐎 Powered by Qwik. Zero hydration and instant interactivity. 10 | - 🗃 File based routing (like Nextjs) 11 | - 🌏 Deploy easily to edge: Netlify, Cloudflare, Vercel, Deno... 12 | - 📖 Author content directly in Markdown or MDX. MDX brings the best of markdown and JSX, allowing you to render Qwik components directly in markdown, like this one: 13 | 14 | ## Next steps 15 | 16 | Open your editor and check the following: 17 | 18 | - **The `pages` folder**: This is where the main content lives. Adding you files (`.md`, `.mdx`, or `.tsx`) will automatically create new URLs. 19 | - **The `src/layout` folder**: This is what bring form to your content. Different kinds of pages, might need to be rendered by a different layout. 20 | This way you can reuse easily the layout across different content. By default, the `src/layout/default` is used. 21 | - **The `src/components` folder**: QwikCity is still a normal Qwik app. Any custom component, design systems, or funcionality should live here. Notice the `header`, `footer` and `content-nav` components. They are used by the `default` layout! 22 | - **The `src/utils` folder**: Place here business logic, or functions that are not components. 23 | -------------------------------------------------------------------------------- /web/src/components/svelte/SvelteComponents.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 |
16 | {#if currentComponent === Components.HelloWorld} 17 | 18 | {:else if currentComponent === Components.Styling} 19 | 20 | {:else if currentComponent === Components.Props} 21 | 22 | {:else if currentComponent === Components.HTML} 23 | 24 | {:else if currentComponent === Components.BasicVariables} 25 | 26 | {:else if currentComponent === Components.DependentVariables} 27 | 28 | {:else if currentComponent === Components.ConditionalRendering} 29 | 30 | {:else if currentComponent === Components.ListLooping} 31 | 32 | {/if} 33 |
34 | -------------------------------------------------------------------------------- /angular/src/app/components-map.ts: -------------------------------------------------------------------------------- 1 | import { Components } from './app.component'; 2 | import { BasicVariablesComponent } from './basic-variables/basic-variables.component'; 3 | import { ConditionalRenderingComponent } from './conditional-rendering/conditional-rendering.component'; 4 | import { DependentVariablesComponent } from './dependent-variables/dependent-variables.component'; 5 | import { HelloWorldComponent } from './hello-world/hello-world.component'; 6 | import { HTMLComponent } from './html/html.component'; 7 | import { ListLoopingComponent } from './list-looping/list-looping.component'; 8 | import { NestingComponentsComponent } from './nesting-components/nesting-components.component'; 9 | import { PropsComponent } from './props/props.component'; 10 | import { StylingComponent } from './styling/styling.component'; 11 | 12 | export const componentsMap = { 13 | HelloWorld: () => HelloWorldComponent, 14 | Styling: () => StylingComponent, 15 | NestingComponents: () => NestingComponentsComponent, 16 | Props: () => PropsComponent, 17 | HTML: () => HTMLComponent, 18 | BasicVariables: () => BasicVariablesComponent, 19 | DependentVariables: () => DependentVariablesComponent, 20 | ConditionalRendering: () => ConditionalRenderingComponent, 21 | ListLooping: () => ListLoopingComponent, 22 | } as const; 23 | 24 | export type ComponentKeys = keyof typeof componentsMap; 25 | -------------------------------------------------------------------------------- /web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-frameworks", 3 | "type": "module", 4 | "version": "0.0.2", 5 | "author": { 6 | "name": "StillScripts", 7 | "url": "https://stillscripts.com" 8 | }, 9 | "private": true, 10 | "scripts": { 11 | "dev": "astro dev", 12 | "start": "astro dev", 13 | "build": "node copyComponents && astro build", 14 | "preview": "astro preview", 15 | "astro": "astro", 16 | "format": "prettier --write \"src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}\"" 17 | }, 18 | "dependencies": { 19 | "@astrojs/lit": "^1.0.1", 20 | "@astrojs/preact": "^1.1.1", 21 | "@astrojs/prism": "^1.0.1", 22 | "@astrojs/react": "^1.1.4", 23 | "@astrojs/solid-js": "^1.1.1", 24 | "@astrojs/svelte": "^1.0.1", 25 | "@astrojs/tailwind": "^2.0.2", 26 | "@astrojs/vue": "^1.1.0", 27 | "@headlessui/react": "^1.7.3", 28 | "@webcomponents/template-shadowroot": "^0.1.0", 29 | "astro": "^1.4.6", 30 | "lit": "^2.1.3", 31 | "preact": "^10.6.5", 32 | "react": "^18.0.0", 33 | "react-dom": "^18.0.0", 34 | "solid-js": "^1.4.3", 35 | "svelte": "^3.46.4", 36 | "tailwindcss": "^3.0.24", 37 | "vue": "^3.2.30" 38 | }, 39 | "devDependencies": { 40 | "@types/react": "^18.0.21", 41 | "prettier": "^2.7.1", 42 | "prettier-plugin-astro": "^0.6.0", 43 | "prettier-plugin-tailwindcss": "^0.1.13" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /vue/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + TypeScript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `