├── public ├── robots.txt ├── manifest.json └── favicon.svg ├── postcss.config.js ├── .vscode └── extensions.json ├── tailwind.config.js ├── .gitignore ├── vite.config.ts ├── .eslintignore ├── .prettierignore ├── src ├── integrations │ └── react │ │ ├── framer.tsx │ │ └── image-gallery.tsx ├── routes │ ├── index.tsx │ ├── service-worker.ts │ ├── layout.tsx │ └── motion-one │ │ └── index.tsx ├── entry.dev.tsx ├── components │ ├── header │ │ ├── header.css │ │ └── header.tsx │ ├── router-head │ │ └── router-head.tsx │ └── icons │ │ └── qwik.tsx ├── entry.preview.tsx ├── entry.ssr.tsx ├── root.tsx └── global.css ├── tsconfig.json ├── .eslintrc.cjs ├── package.json ├── README.md └── pnpm-lock.yaml /public/robots.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["dbaeumer.vscode-eslint", "unifiedjs.vscode-mdx"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/web-manifest-combined.json", 3 | "name": "qwik-project-name", 4 | "short_name": "Welcome to Qwik", 5 | "start_url": ".", 6 | "display": "standalone", 7 | "background_color": "#fff", 8 | "description": "A Qwik project app." 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Build 2 | /dist 3 | /lib 4 | /lib-types 5 | /server 6 | 7 | # Development 8 | node_modules 9 | 10 | # Cache 11 | .cache 12 | .mf 13 | .rollup.cache 14 | tsconfig.tsbuildinfo 15 | 16 | # Logs 17 | logs 18 | *.log 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | pnpm-debug.log* 23 | lerna-debug.log* 24 | 25 | # Editor 26 | .vscode/* 27 | !.vscode/extensions.json 28 | .idea 29 | .DS_Store 30 | *.suo 31 | *.ntvs* 32 | *.njsproj 33 | *.sln 34 | *.sw? 35 | 36 | # Yarn 37 | .yarn/* 38 | !.yarn/releases 39 | -------------------------------------------------------------------------------- /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 tsconfigPaths from "vite-tsconfig-paths"; 5 | import { qwikReact } from "@builder.io/qwik-react/vite"; 6 | 7 | export default defineConfig(() => { 8 | return { 9 | plugins: [qwikCity(), qwikVite(), tsconfigPaths(), qwikReact()], 10 | preview: { 11 | headers: { 12 | "Cache-Control": "public, max-age=600", 13 | }, 14 | }, 15 | }; 16 | }); 17 | -------------------------------------------------------------------------------- /.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 | lib 15 | lib-types 16 | etc 17 | external 18 | node_modules 19 | temp 20 | tsc-out 21 | tsdoc-metadata.json 22 | target 23 | output 24 | rollup.config.js 25 | build 26 | .cache 27 | .vscode 28 | .rollup.cache 29 | dist 30 | tsconfig.tsbuildinfo 31 | vite.config.ts 32 | *.spec.tsx 33 | *.spec.ts 34 | .netlify 35 | pnpm-lock.yaml 36 | package-lock.json 37 | yarn.lock 38 | server 39 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 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 | lib 15 | lib-types 16 | etc 17 | external 18 | node_modules 19 | temp 20 | tsc-out 21 | tsdoc-metadata.json 22 | target 23 | output 24 | rollup.config.js 25 | build 26 | .cache 27 | .vscode 28 | .rollup.cache 29 | dist 30 | tsconfig.tsbuildinfo 31 | vite.config.ts 32 | *.spec.tsx 33 | *.spec.ts 34 | .netlify 35 | pnpm-lock.yaml 36 | package-lock.json 37 | yarn.lock 38 | server 39 | -------------------------------------------------------------------------------- /src/integrations/react/framer.tsx: -------------------------------------------------------------------------------- 1 | /** @jsxImportSource react */ 2 | import { qwikify$ } from '@builder.io/qwik-react'; 3 | import { motion } from 'framer-motion'; 4 | 5 | const MyComponent = () => ( 6 | 16 | ); 17 | 18 | export const FramerQwik = qwikify$(MyComponent); 19 | -------------------------------------------------------------------------------- /src/routes/index.tsx: -------------------------------------------------------------------------------- 1 | // FILE: src/routes/index.tsx 2 | // ========================================== 3 | 4 | import { component$ } from '@builder.io/qwik'; 5 | import { FramerQwik } from '~/integrations/react/framer'; 6 | import { ImageGallery } from '~/integrations/react/image-gallery'; 7 | 8 | export default component$(() => { 9 | return ( 10 |
11 |

Qwik/React Framer Motion

12 |
13 | 14 |
15 | 16 |
17 | ); 18 | }); 19 | -------------------------------------------------------------------------------- /src/entry.dev.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * WHAT IS THIS FILE? 3 | * 4 | * Development entry point using only client-side modules: 5 | * - Do not use this mode in production! 6 | * - No SSR 7 | * - No portion of the application is pre-rendered on the server. 8 | * - All of the application is running eagerly in the browser. 9 | * - More code is transferred to the browser than in SSR mode. 10 | * - Optimizer/Serialization/Deserialization code is not exercised! 11 | */ 12 | import { render, type RenderOptions } from '@builder.io/qwik'; 13 | import Root from './root'; 14 | 15 | export default function (opts: RenderOptions) { 16 | return render(document, , opts); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/header/header.css: -------------------------------------------------------------------------------- 1 | header { 2 | display: flex; 3 | background: white; 4 | border-bottom: 10px solid var(--qwik-dark-purple); 5 | } 6 | 7 | header .logo a { 8 | display: inline-block; 9 | padding: 10px 10px 7px 20px; 10 | } 11 | 12 | header ul { 13 | margin: 0; 14 | padding: 3px 10px 0 0; 15 | list-style: none; 16 | flex: 1; 17 | text-align: right; 18 | } 19 | 20 | header li { 21 | display: inline-block; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | header li a { 27 | display: inline-block; 28 | padding: 15px 10px; 29 | text-decoration: none; 30 | } 31 | 32 | header li a:hover { 33 | text-decoration: underline; 34 | } 35 | -------------------------------------------------------------------------------- /src/entry.preview.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | * WHAT IS THIS FILE? 3 | * 4 | * It's the bundle entry point for `npm run preview`. 5 | * That is, serving your app built in production mode. 6 | * 7 | * Feel free to modify this file, but don't remove it! 8 | * 9 | * Learn more about Vite's preview command: 10 | * - https://vitejs.dev/config/preview-options.html#preview-options 11 | * 12 | */ 13 | import { createQwikCity } from '@builder.io/qwik-city/middleware/node'; 14 | import render from './entry.ssr'; 15 | import qwikCityPlan from '@qwik-city-plan'; 16 | 17 | /** 18 | * The default export is the QwikCity adapter used by Vite preview. 19 | */ 20 | export default createQwikCity({ render, qwikCityPlan }); 21 | -------------------------------------------------------------------------------- /src/routes/service-worker.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * WHAT IS THIS FILE? 3 | * 4 | * The service-worker.ts file is used to have state of the art prefetching. 5 | * https://qwik.builder.io/qwikcity/prefetching/overview/ 6 | * 7 | * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline. 8 | * You can also use this file to add more functionality that runs in the service worker. 9 | */ 10 | import { setupServiceWorker } from '@builder.io/qwik-city/service-worker'; 11 | 12 | setupServiceWorker(); 13 | 14 | addEventListener('install', () => self.skipWaiting()); 15 | 16 | addEventListener('activate', () => self.clients.claim()); 17 | 18 | declare const self: ServiceWorkerGlobalScope; 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "target": "ES2017", 5 | "module": "ES2020", 6 | "lib": ["es2020", "DOM", "WebWorker", "DOM.Iterable"], 7 | "jsx": "react-jsx", 8 | "jsxImportSource": "@builder.io/qwik", 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "resolveJsonModule": true, 12 | "moduleResolution": "node", 13 | "esModuleInterop": true, 14 | "skipLibCheck": true, 15 | "incremental": true, 16 | "isolatedModules": true, 17 | "outDir": "tmp", 18 | "noEmit": true, 19 | "types": ["node", "vite/client"], 20 | "paths": { 21 | "~/*": ["./src/*"] 22 | } 23 | }, 24 | "files": ["./.eslintrc.cjs"], 25 | "include": ["src"] 26 | } 27 | -------------------------------------------------------------------------------- /src/routes/layout.tsx: -------------------------------------------------------------------------------- 1 | import { component$, Slot } from '@builder.io/qwik'; 2 | import { routeLoader$ } from '@builder.io/qwik-city'; 3 | 4 | import Header from '../components/header/header'; 5 | 6 | export const useServerTimeLoader = routeLoader$(() => { 7 | return { 8 | date: new Date().toISOString(), 9 | }; 10 | }); 11 | 12 | export default component$(() => { 13 | const serverTime = useServerTimeLoader(); 14 | return ( 15 | <> 16 |
17 |
18 |
19 | 20 |
21 |
22 | 28 | 29 | ); 30 | }); 31 | -------------------------------------------------------------------------------- /src/entry.ssr.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * WHAT IS THIS FILE? 3 | * 4 | * SSR entry point, in all cases the application is render outside the browser, this 5 | * entry point will be the common one. 6 | * 7 | * - Server (express, cloudflare...) 8 | * - npm run start 9 | * - npm run preview 10 | * - npm run build 11 | * 12 | */ 13 | import { renderToStream, type RenderToStreamOptions } from '@builder.io/qwik/server'; 14 | import { manifest } from '@qwik-client-manifest'; 15 | import Root from './root'; 16 | 17 | export default function (opts: RenderToStreamOptions) { 18 | return renderToStream(, { 19 | manifest, 20 | ...opts, 21 | // Use container attributes to set attributes on the html tag. 22 | containerAttributes: { 23 | lang: 'en-us', 24 | ...opts.containerAttributes, 25 | }, 26 | }); 27 | } 28 | -------------------------------------------------------------------------------- /src/root.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from '@builder.io/qwik'; 2 | import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city'; 3 | import { RouterHead } from './components/router-head/router-head'; 4 | 5 | import './global.css'; 6 | 7 | export default component$(() => { 8 | /** 9 | * The root of a QwikCity site always start with the component, 10 | * immediately followed by the document's and . 11 | * 12 | * Dont remove the `` and `` elements. 13 | */ 14 | 15 | return ( 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | }); 29 | -------------------------------------------------------------------------------- /src/routes/motion-one/index.tsx: -------------------------------------------------------------------------------- 1 | import { component$, useVisibleTask$ } from '@builder.io/qwik'; 2 | import { animate } from 'motion'; 3 | 4 | export default component$(() => { 5 | useVisibleTask$(() => { 6 | animate( 7 | '#animation-target', 8 | { 9 | scale: [1, 2, 2, 1, 1], 10 | rotate: [0, 0, 270, 270, 0], 11 | borderRadius: ['20%', '20%', '50%', '50%', '20%'], 12 | backgroundColor: [ 13 | '#ff008c', 14 | '#d309e1', 15 | '#9c1aff', 16 | '#7700ff', 17 | '#ff008c', 18 | ], 19 | }, 20 | { 21 | duration: 2, 22 | easing: 'ease-in-out', 23 | repeat: 2, 24 | direction: 'alternate', 25 | } 26 | ); 27 | }); 28 | return ( 29 |
33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/router-head/router-head.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from '@builder.io/qwik'; 2 | import { useDocumentHead, useLocation } from '@builder.io/qwik-city'; 3 | 4 | /** 5 | * The RouterHead component is placed inside of the document `` element. 6 | */ 7 | export const RouterHead = component$(() => { 8 | const head = useDocumentHead(); 9 | const loc = useLocation(); 10 | 11 | return ( 12 | <> 13 | {head.title} 14 | 15 | 16 | 17 | 18 | 19 | {head.meta.map((m) => ( 20 | 21 | ))} 22 | 23 | {head.links.map((l) => ( 24 | 25 | ))} 26 | 27 | {head.styles.map((s) => ( 28 |