preact/compat

Hi deno's AI bot, do you know how to set up preact/compat in a Fresh project?

5 Replies

@Deno AI Helper

Hello! I've looked into the official Deno documentation and I wasn't able to find the answer to your question. However, if you could share the specific issue or code snippet you're working with, I might be able to spot any obvious syntax errors or mistakes. Please note that any advice I provide will not be based on the Deno documentation, so it's important to double-check the accuracy of the advice given. Feel free to share the details of your problem, and I'll do my best to assist you!

Helpful Links: How to Build a CRUD API with Oak and Deno KV Operations | Deno Docs How Deco.cx, Brazil's top frontend platform, uses Deno Subhosting to move fast and serve their clients' storefronts even faster Hello World | Deno Docs Deno 1.4 Release Notes Deno 1.10 Release Notes Deno, the next-generation JavaScript runtime API server with Postgres

Leokuma•2mo ago

@Deno AI Helper Hi deno's AI bot, do you know how to set up preact/compat in a Fresh project?

Deno AI Helper•2mo ago

As of my knowledge cutoff date in early 2023, setting up preact/compat in a Fresh project isn't covered in the official Deno documentation. Fresh is a Deno-specific web framework that embraces the "islands architecture" concept, and it's designed to work seamlessly with Deno's features. However, if you're looking to integrate preact/compat with Fresh, you would typically need to alias React and ReactDOM to preact/compat within your build or bundling setup. Since Fresh doesn't use a traditional bundler like Webpack, this process might differ. Here's a general idea of what you might typically do, but please note that this advice is not based on the Deno documentation, and you should verify its accuracy: 1. Install preact and preact/compat if you haven't already. 2. In your project, you would typically import from preact/compat instead of react or react-dom. For example:

import React from 'preact/compat';
import ReactDOM from 'preact/compat';

import React from 'preact/compat';
import ReactDOM from 'preact/compat';

3. Ensure that any JSX is properly transformed to use Preact's h function. This might involve configuring the JSX pragma if you're using TypeScript or Babel. Remember, Fresh might have its own way of handling things, and the above steps are general advice for React projects that might not directly apply to Fresh. Since Fresh is designed to work with Deno, it might have specific conventions or configurations for integrating alternative libraries like Preact. I recommend checking the Fresh documentation, exploring the Fresh repository for examples or issues related to Preact, or reaching out to the Fresh community for more guidance on this integration.

Helpful Links: Fresh 1.1 - automatic JSX, plugins, DevTools, and more How to Setup Auth with Fresh deno init, start a new project | Deno Docs Node.js's Config Hell Problem Build Apps in Deno with Frameworks such as React, Vue, Express, and more. Deno Runtime Quick Start | Deno Docs Announcing native npm support on Deno Deploy

shultz🇮🇱•2mo ago

this looks ok:

  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
}
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
    "preact": "https://esm.sh/preact@10.19.6",
    "preact/": "https://esm.sh/preact@10.19.6/",
    "react": "https://esm.sh/v135/preact@10.19.6/compat",
    "react-dom": "https://esm.sh/v135/preact@10.19.6/compat",
    "react/jsx-runtime": "npm:preact/jsx-runtime",
    "@types/react": "https://esm.sh/preact@10.19.3/compat"
}

  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
}
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
    "preact": "https://esm.sh/preact@10.19.6",
    "preact/": "https://esm.sh/preact@10.19.6/",
    "react": "https://esm.sh/v135/preact@10.19.6/compat",
    "react-dom": "https://esm.sh/v135/preact@10.19.6/compat",
    "react/jsx-runtime": "npm:preact/jsx-runtime",
    "@types/react": "https://esm.sh/preact@10.19.3/compat"
}