diff --git a/examples/with-ssr-modal/.gitignore b/examples/with-ssr-modal/.gitignore new file mode 100644 index 000000000..6680baa7b --- /dev/null +++ b/examples/with-ssr-modal/.gitignore @@ -0,0 +1,4 @@ +build +node_modules +out +.vercel diff --git a/examples/with-ssr-modal/README.md b/examples/with-ssr-modal/README.md new file mode 100644 index 000000000..59042885e --- /dev/null +++ b/examples/with-ssr-modal/README.md @@ -0,0 +1,7 @@ +# with-ssr-modal + +Example controlling the open/close rendering of a modal with server code only (server action + SSR with streaming). + +```bash +bun create brisa --example with-ssr-modal +``` diff --git a/examples/with-ssr-modal/bunfig.toml b/examples/with-ssr-modal/bunfig.toml new file mode 100644 index 000000000..69803a7a9 --- /dev/null +++ b/examples/with-ssr-modal/bunfig.toml @@ -0,0 +1,2 @@ +[test] +preload = "brisa/test" \ No newline at end of file diff --git a/examples/with-ssr-modal/package.json b/examples/with-ssr-modal/package.json new file mode 100644 index 000000000..7dc39ed3b --- /dev/null +++ b/examples/with-ssr-modal/package.json @@ -0,0 +1,20 @@ +{ + "name": "with-ssr-modal", + "module": "src/pages/index.tsx", + "type": "module", + "example-category": "basics", + "webTitle": "Server-Side Dialog Management", + "scripts": { + "dev": "brisa dev", + "dev:debug": "brisa dev --debug", + "build": "brisa build", + "start": "brisa start" + }, + "dependencies": { + "brisa": "0.2.1-canary.2" + }, + "devDependencies": { + "@types/bun": "latest", + "typescript": "latest" + } +} diff --git a/examples/with-ssr-modal/src/components/footer.tsx b/examples/with-ssr-modal/src/components/footer.tsx new file mode 100644 index 000000000..d61deb5f8 --- /dev/null +++ b/examples/with-ssr-modal/src/components/footer.tsx @@ -0,0 +1,19 @@ +export default function Footer() { + return ( + + ); +} diff --git a/examples/with-ssr-modal/src/components/navigation.tsx b/examples/with-ssr-modal/src/components/navigation.tsx new file mode 100644 index 000000000..eb11e0eb8 --- /dev/null +++ b/examples/with-ssr-modal/src/components/navigation.tsx @@ -0,0 +1,25 @@ +export default function Nav() { + return ( + + ); +} diff --git a/examples/with-ssr-modal/src/layout/index.tsx b/examples/with-ssr-modal/src/layout/index.tsx new file mode 100644 index 000000000..65a4edb6c --- /dev/null +++ b/examples/with-ssr-modal/src/layout/index.tsx @@ -0,0 +1,36 @@ +import Nav from '@/components/navigation'; +import Footer from '@/components/footer'; + +import '@/styles/style.css'; +import '@/styles/nav.css'; +import '@/styles/footer.css'; + +export default function Layout({ children }: { children: JSX.Element }) { + return ( + +
+✏️ Change this page on
+src/pages/about/index.tsx
+ + Brisa is the Web Platform Framework. Its pages are dynamically + server-rendered JSX components, so there's zero JavaScript shipped + to the browser by default. +
+ ++ Everything runs exclusively on the server by default, except the Web + Components folder which, of course, also runs on the client. +
+ ++ We have solved the burden of writing and processing Web Components. + Easy to write with Signals, Server-Side rendering, and optimized in + build time to be fast and small; if you use Web Components, it adds + +3KB. +
+ ++ You can also use the Brisa compiler to create libraries of Web + Components that work in any framework- or even without a framework, + and they are supported by Server-Side rendering. +
+ ++ We have also solved the Server Actions. With Brisa, the server + components can capture any browser event: onSubmit, onInput, + onFocus, onClick, and, all events from Web Components, like + onClickOnMyComponent. These are all Server-Actions now, so you don't + need to put "use client" nor "use server" any more. On the server + they are simply Server-Actions, and on the client they are simply + browser-events. +
+ ++ To make this possible we have improved the communication between + both worlds, creating new concepts like "Action Signals". With + these, the server can react to Web Components without the need for + rerenders. We have also added ideas from HTMX; you have extra + attributes in the HTML for debouncing or managing errors and pending + states. +
+ +Brisa not only uses Hypermedia, it streams it over the wire.
+ ++ Brisa is also the only framework with full Internationalization + support. not only routing, but you can also translate your pages and + the URL pathnames if you need it. If you use i18n, the server + components are 0 Bytes, but in Web Components are 800 B. At the end + we use the Web Platform; we make a bridge with the ECMAScript Intl + API to make it easier for you to translate your Web Components. +
+ ++ In Brisa we like the idea that all the tooling is integrated, that's + why Brisa is made with Bun we have extended the Matchers and added + an API so you can run with Bun the tests of your Components. +
+ ++ Bun is great and improves the development experience a lot. Although + we recommend Bun.js also as runtime, as output you can use Node.js + or Deno if you want, generate a static output and upload it to a + CDN, or generate an executable app for Android (.apk), iOS (.ipa), + Windows (.exe), Mac (.dmg), or Linux (.deb). Yes, Brisa is + multiplatform thanks to its integration with Tauri. +
+ ++ We support Partial Prerendering, you can prerender only a part of + your page, such as the footer. +
+ ++ We also support many more features like middleware, layouts, + WebSockets, API routes, suspense, etc. +
+ ++ Brisa is the future of the Web, and the future is now. We invite you + to try it and contribute to the community. +
+ ++ Ready to start?{' '} + + Read the docs + +
++ Correct! +
+ ) : ( ++ Incorrect! +
+ ), + target: 'dialog', + }); +} + +export default function Homepage() { + return ( + <> +✏️ SSR Modal example
+src/pages/index.tsx
+