Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/preact */
2import ImportCar from "https://esm.town/v/tfayyaz/reactImportCar";
3import { render } from "npm:preact-render-to-string";
4
5function Car(props) {
19}
20
21export const preactExample = (request: Request) =>
22  new Response(render(<Garage />), {
23    headers: {

1/** @jsxImportSource https://esm.sh/react */
2import { DateTime } from "https://cdn.skypack.dev/luxon@2.3.2";
3import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
4import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
5import { renderToString } from "npm:react-dom/server";
6
7const { author, name, httpEndpoint } = extractValInfo(import.meta.url);

1/** @jsxImportSource npm:react **/
2import Alea from "npm:alea";
3import { renderToString } from "npm:react-dom@18/server";
4import { createNoise2D } from "npm:simplex-noise";
5

1#  Client Side React Helper
2
3## Example Usage
4
5```tsx
6/** @jsxImportSource https://esm.sh/react */
7import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";
8import { useState } from "https://esm.sh/react@18.2.0";
9
10export function App() {
17}
18
19export default () => react_http({
20  component: App,
21  sourceURL: import.meta.url,
31#### Only use https imports
32
33The val with your React component will be imported in the browser. Thus, only use `https` imports in this val and any that it imports. Replace any `npm:` with `https://esm.sh/` and everything should work great.

6      <script type="module">
7        import { ${component.name} } from "${sourceURL}";
8        import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
9        import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";
10        createRoot(document.body).render(jsx(${component.name}, {}));
11      </script>

1// JSX can be used in the client val thanks to this magic comment
2/** @jsxImportSource https://esm.sh/react **/
3// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
4import { GGMLQuantizationType, gguf } from "https://esm.sh/@huggingface/gguf";
5import React from "https://esm.sh/react";
6import ReactDOM from "https://esm.sh/react-dom";
7import { ObjectInspector } from "https://esm.sh/react-inspector";
8
9async function fetchGgufMetadata(url: string) {
13
14function Counter() {
15  const [counter, setCounter] = React.useState(0);
16
17  return (
29  return (
30    <>
31      <h1>React Example</h1>
32      <Counter />
33    </>
36
37// The app will be rendered inside the root div
38const root = ReactDOM.createRoot(document.getElementById("root"));
39root.render(<App />);

8
9```tsx
10/** @jsxImportSource https://esm.sh/react */
11import { renderToString } from "npm:react-dom/server";
12
13export default async function(req: Request): Promise<Response> {

1/** @jsxImportSource https://esm.sh/react */
2import { DateTime } from "https://cdn.skypack.dev/luxon@2.3.2";
3import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
4import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
5import { renderToString } from "npm:react-dom/server";
6
7const { author, name, httpEndpoint } = extractValInfo(import.meta.url);

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4// dprint-ignore

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request): Promise<Response> {