Poncho Posts

Poncho

•Created by Poncho on 4/19/2024 in #help

Module not found error when importing plugin islands

I'm trying to add islands to my plugin so that they "will treat them the same way as if they had been placed inside the islands/ directory." according to the docs (https://fresh.deno.dev/docs/concepts/plugins#islands). But when I try to import my island with: import Chiplist from '@/islands/Chiplist.tsx'; I get a "Module not found" error. Any ideas on why would be appreciated. This is how I'm adding the islands to my plugin:

export default function lunchboxPlugin(): Plugin {
  return {
    name: 'lunchbox',
    islands: {
      baseLocation: import.meta.url,
      paths: [
        './src/components/organisms/Chiplist/Chiplist.tsx',
      ],
    },
  };
}

export default function lunchboxPlugin(): Plugin {
  return {
    name: 'lunchbox',
    islands: {
      baseLocation: import.meta.url,
      paths: [
        './src/components/organisms/Chiplist/Chiplist.tsx',
      ],
    },
  };
}

Thank you

3 replies

DDeno

•Created by Poncho on 4/2/2024 in #help

Add static font files as a fresh plugin

Hello! I'm creating a component library for Fresh. I'm in the part of setting up the plugin part of the library and I've successfully configured all static css and islands. I am looking for a way (if possible) of also adding static font files (.woff2 and such) so that the users of my library won't have to manually add them to the /static directory, and importing them in the /routes/_app.tsx function. Thank you 😄

4 replies

DDeno

•Created by Poncho on 2/27/2024 in #help

How to validate types in API Requests and Responses?

Hello, I'm wondering how to validate and handle the types in my app's API. I'll use the example found in the docs as an example:

// routes/api/users/index.ts
export const handler: Handlers<User | null> = {
  async POST(req, _ctx) {
    const user = (await req.json()) as User;
    const userKey = ["user", user.id];
    const ok = await kv.atomic().set(userKey, user).commit();
    if (!ok) throw new Error("Something went wrong.");
    return new Response(JSON.stringify(user));
  },
};

// routes/api/users/index.ts
export const handler: Handlers<User | null> = {
  async POST(req, _ctx) {
    const user = (await req.json()) as User;
    const userKey = ["user", user.id];
    const ok = await kv.atomic().set(userKey, user).commit();
    if (!ok) throw new Error("Something went wrong.");
    return new Response(JSON.stringify(user));
  },
};

How to add a type validator for the object req.json() that throws an error when it doesn't match the User interface and continues with the code if it does? Thank you

3 replies

DDeno

•Created by Poncho on 2/22/2024 in #help

Encryption using Deno KV and OAuth?

I'm creating a note-taking app using most of Deno's tools. I was thinking about encrypting user notes for additional privacy. The problem I have is that I don't know how to generate and manage the encryption keys without somehow storing them in the server. If anyone has any pointers on how to achieve this I would love to hear it, thank you.

7 replies

DDeno

•Created by Poncho on 8/30/2023 in #help

Deno deploy --allow-write permission.

I'm writing a small web app that uses tilia (https://deno.land/x/tilia@0.1.2) to manage a small json database. But when deploying (with Deno Deploy) it throws this error:

PermissionDenied: Requires write access to '/src/data/db/entries.json.db', but the file system on Deno Deploy is read-only.
    at Object.writeFile (ext:deno_fs/30_fs.js:807:18)
    at init (https://deno.land/x/tilia@0.1.2/src/storage.ts:4:16)
    at Collection.loadDatabase (https://deno.land/x/tilia@0.1.2/src/collection.ts:18:12)
    at new Collection (https://deno.land/x/tilia@0.1.2/src/collection.ts:14:12)
    at file:///src/utils/db/entry.ts:2:17

PermissionDenied: Requires write access to '/src/data/db/entries.json.db', but the file system on Deno Deploy is read-only.
    at Object.writeFile (ext:deno_fs/30_fs.js:807:18)
    at init (https://deno.land/x/tilia@0.1.2/src/storage.ts:4:16)
    at Collection.loadDatabase (https://deno.land/x/tilia@0.1.2/src/collection.ts:18:12)
    at new Collection (https://deno.land/x/tilia@0.1.2/src/collection.ts:14:12)
    at file:///src/utils/db/entry.ts:2:17

How can I deploy my app with the --allow-write permission enabled?

3 replies

DDeno

•Created by Poncho on 12/12/2022 in #help

How to forward a reference to a component

4 replies

DDeno

•Created by Poncho on 10/5/2022 in #help

How to import the Image class to Deno Fresh?

I'm trying to access an image's naturalHeight and naturalWidth. But when I construct the object new Image() I get a Reference Error that it is not defined. I figured I could import it from a preact module or something similar to (import {Image} from 'preact/image), but I simply couldn't find out from which module to import it.

6 replies

DDeno

•Created by Poncho on 9/27/2022 in #help

Unable to make local session persistence with Firebase Auth on Deno Fresh

Hello I'm running a basic app for testing firebase auth. My implementation is as follows: - The firebase app is initialized in ~/back/firebase.ts using env variables for the configuration values. - The sign-in functionality is in ~/routes/api/signin, The POST method executes the signin using firebase auth and redirects to /profile. The GET method returns the current session for fetching. - The /profile page redirects to /signin if there is no user in sessión, and would otherwise display the user's data. - The polyfills recommended by the documentation (https://deno.com/deploy/docs/tutorial-firebase) are inside ~/main.ts. When I run the app, and sign-in, the session is not stored locally. I've tried using the solution in the tutorial I mentioned earlier, but honestly it is unclear to me how to adapt the localStorage middleware to fresh correctly. Something different I tried to solve this was using Firebase Auth's function setPersistence(auth, browserLocalPersistence); but it never had any effect on the client. Thanks in advance.

1 replies