/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", a: "a", h2: "h2", h3: "h3", code: "code", pre: "pre", hr: "hr" }, props.components); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["One of the features in ", _jsx(_components.a, { href: "*https://stym.io*", children: "Stym" }), " is a profile management widget that can be embedded on any website. The widget is connected to our backend and lets users manage their profile, billing, and invoices. When I started to build it, I didn't want to code in vanilla JS. I wanted to use React but as something that will be embedded in other websites, the main requirement was a small size, preferably under 50kb. So I picked Preact."] }), "\n", _jsx(_components.h2, { children: "Why Preact?" }), "\n", _jsx(_components.p, { children: "Preact has almost the same API but it's very lightweight. How light? It's only 3kb!! 🤯 Granted, its diffing algorithm is quite simple but for my use cases, it was perfect. I also didn't need all of React's features. I just wanted composable components that are easy to write. I've never used Preact before but was excited to check it out." }), "\n", _jsx(_components.p, { children: "Since Preact has such a small size, browsers can parse the entire code fast which results in a good user experience. And because of the API, all React modules are available for use so what we can build with it is limitless." }), "\n", _jsx(_components.h2, { children: "Gotchas" }), "\n", _jsx(_components.p, { children: "There were a few things to look out for when building this." }), "\n", _jsxs(_components.h3, { children: ["1. ", _jsx(_components.code, { children: "h()" }), " and ", _jsx(_components.code, { children: "render()" })] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "h()" }), " and ", _jsx(_components.code, { children: "render()" }), " functions are the most commonly used in a Preact project. ", _jsx(_components.code, { children: "h()" }), " is what turns JSX into Javascript."] }), "\n", _jsxs(_components.p, { children: ["Unlike React, we don't need a separate DOM package in Preact. That is the reason why Preact is so small. The minified ", _jsx(_components.code, { children: "react" }), " package is only 11kb. But the majority of what React does is in the ", _jsx(_components.code, { children: "react-dom" }), " package which is 120kb, minified."] }), "\n", _jsxs(_components.p, { children: ["Preact has a simpler ", _jsx(_components.code, { children: "render()" }), " which adds the UI to the DOM."] }), "\n", _jsx(_components.h3, { children: "2. Using NPM modules made for React" }), "\n", _jsxs(_components.p, { children: ["Preact also comes with a compatibility layer for React available under ", _jsx(_components.code, { children: "preact/compat" }), ". To use React modules with Preact, we have to alias ", _jsx(_components.code, { children: "react" }), " and ", _jsx(_components.code, { children: "react-dom" }), " to ", _jsx(_components.code, { children: "preact/compat" }), ". This is how we do it in Webpack:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "module.exports = {\n ...,\n resolve: {\n alias: {\n react: 'preact/compat',\n 'react-dom': 'preact/compat',\n },\n }\n};\n" }) }), "\n", _jsx(_components.h3, { children: "3. Routing" }), "\n", _jsxs(_components.p, { children: ["The widget I was building had multiple pages. So I needed some form of routing. Preact does have a separate ", _jsx(_components.code, { children: "preact-router" }), " package but it would affect the routing of the parent website. And I didn't want the extra weight. So I used an in-memory router that would handle page changes within the widget without affecting the parent website."] }), "\n", _jsx(_components.p, { children: "Here's the code:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import { createContext, createElement, h } from 'preact'\nimport { useEffect, useState } from 'preact/hooks'\n\nconst DEFAULT_ROUTE = '/'\n\nexport const RouterContext = createContext({\n\troute: DEFAULT_ROUTE,\n\tsetRoute: () => undefined,\n})\n\nexport const Router = ({ routes, onChange }) => {\n\tconst [route, setRoute] = useState(DEFAULT_ROUTE)\n\n\tuseEffect(() => {\n\t\tonChange?.(route)\n\t}, [route])\n\n\treturn (\n\t\t\n\t\t\t {routes[route]} \n\t\t\n\t)\n}\n\nexport const RouteComponent = (props) => {\n\tconst { component, ...rest } = props\n\treturn createElement(component, rest)\n}\n\n/**\n * Render anchor with click handler to switch route based on `href` attribute.\n * We intentionally override final `href`, so links within widget won't lead to actual pages on the parent website.\n */\n\nexport const Link = ({ href, children, ...rest }) => (\n\t\n\t\t \n\t\t{({ setRoute }) => (\n\t\t\t href && setRoute(href)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t {children} {' '}\n\t\t\t\n\t\t)}\n\t\t {' '}\n\t\n)\n" }) }), "\n", _jsxs(_components.p, { children: ["Now I can use this Router component in the root component. There's also an ", _jsx(_components.code, { children: "onChange" }), " prop that I can pass a function to, for handling route changes. I'm using this to show a back button inside the widget when it's not the main page."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: ",\n\t\t'/edit': ,\n\t}}\n/>\n" }) }), "\n", _jsx(_components.h2, { children: "Passing Props" }), "\n", _jsxs(_components.p, { children: ["Users can add this widget using a script tag, but I also wanted to pass some initial props to it for use in backend calls. Initially, I used ", _jsx(_components.code, { children: "preact-habitat" }), " to render the widget components to DOM. But in the end, I removed it because passing props to the widget from the script tag on the parent weren't the way I liked it."] }), "\n", _jsx(_components.p, { children: "Instead I did this:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import { h, render } from 'preact'\nimport Widget from './components/Widget'\nimport './styles/global.css'\n\nexport function init(id, wrapper) {\n\tconst renderElement = document.querySelector(wrapper)\n\t\t? document.querySelector(wrapper)\n\t\t: document.querySelector('body')\n\trender(h(Widget, { id }), renderElement)\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Now I can use ", _jsx(_components.code, { children: "props.id" }), " on my widget component. I also wanted the ", _jsx(_components.code, { children: "init()" }), " to be available under ", _jsx(_components.code, { children: "Widget" }), " and add that to the ", _jsx(_components.code, { children: "window" }), " object. This is quite simple to do in webpack:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "module.exports = {\n ...,\n library: 'Widget',\n libraryTarget: 'umd'\n ...\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["To call the ", _jsx(_components.code, { children: "init()" }), " function from the script tag, I simply added an ", _jsx(_components.code, { children: "onload" }), " attribute that would call ", _jsx(_components.code, { children: "window.Widget.init('id')" }), "."] }), "\n", _jsx(_components.p, { children: "The script tag that adds this widget to any website will look like this:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "\n" }) }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.p, { children: ["Apart from the above things I did to get the widget working, everything else was like building a typical React web application. There were some more dependencies I added that made building it easier, like Tailwind and React Feather (for icons). To make calls to the backend, I installed ", _jsx(_components.code, { children: "redaxios" }), " which is a much lighter version of ", _jsx(_components.code, { children: "axios" }), ". I could have used ", _jsx(_components.code, { children: "fetch" }), " but it didn't fit my use case."] }), "\n", _jsx(_components.p, { children: "Along with the dependencies, tree shaking by webpack, and purging unused CSS by tailwind, the final package was ~34kb, which was fantastic! 😁" }), "\n", _jsx(_components.p, { children: "There was some initial setup and a lot of googling but in the end, I was very happy with how the widget turned out. Now that I've used it, I see so many possibilities for using Preact, especially where there is a strict size constraint. This means Preact apps could be used as embeds, browser extensions, for white-labeling a product, and deployments in places with poor internet connections!" }), "\n", _jsx(_components.p, { children: "I hope this article was helpful. Have you used Preact or actively use it in your projects? What do you use it for? How was your experience using it? Let me know in the comments." }), "\n", _jsx(_components.p, { children: "Until next time." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

Creating a lightweight widget in Preact