ventojs / vento

🌬 A template engine for Deno & Node
https://vento.js.org/
MIT License
212 stars 12 forks source link

for loop using a function throws error #76

Closed illyrius666 closed 1 month ago

illyrius666 commented 1 month ago

index.vto:

{{ for await member in getMembers() }}
        <p>{{ member.followers_url.length }}</p>
{{ /for }}

xodium.index.ts:

export function getMembers(): Promise<unknown[]> {
  return GithubService.getData("members");
}

is how i import it. i thought first it was because the script got imported at the end of the file but moving it up doesnt work either. i have no clue what iam doing wrong, this is the error message: Caused by: Error: Invalid for loop: for await member in getMembers()

oscarotero commented 1 month ago

For loops syntax is for ... of, not for ... in.

illyrius666 commented 1 month ago

iam sorry iam really blind, it litterly shows so in the documentation

illyrius666 commented 1 month ago

okay i fixed that but now it doesnt recognize my function from my imported script? Caused by: TypeError: it.getMembers is not a function

oscarotero commented 1 month ago

Scripts loaded with <script type="module" src="assets/modules/xodium.index.js"></script> are available in browser but not in Lume.

You can export this function from a _data.ts file so it's available in vento:

// _data.ts

export function getMembers() {
 ...
}
illyrius666 commented 1 month ago

ooo so thats what the data file is for, okay noted, thank you greatly. another thing, which i came to stumble upon, is that when i have this:

// _data.ts
import { GithubService } from "xodium/utils/github";

export function getMembers(): Promise<unknown[]> {
    return GithubService.getData("members");
}

i come to a point where for example githubservice uses my localstorageservice which uses build-in localStorage from \asset\lib.deno.window.d.ts:

  static getItem(key: string): string | number | boolean | object | null {
    const itemStr = localStorage.getItem(key);
    if (!itemStr) return null;
    try {
      const item: StoredItem = JSON.parse(itemStr);
      if (item.expiry && Date.now() > item.expiry) {
        localStorage.removeItem(key);
        return null;
      }
      return item.value;
    } catch (e) {
      console.error("Error parsing stored item", e);
      return null;
    }
  }

however i get this message: error: Uncaught (in worker "") (in promise) ReferenceError: localStorage is not defined const itemStr = localStorage.getItem(key);

is it because i dont have it defined in my _data? because using this with .js code works perfectly fine.

oscarotero commented 1 month ago

Mmmm, Lume builds the site in a Worker, but looks like localStorage object is not available from workers.

Is localStorage access required? I don't know if there's a way to emulate it.

illyrius666 commented 1 month ago

I kinda need it to store some data otherwise I will get over my GitHub api rate limit, would be wasteful to not reuse it as long as nothing changes

illyrius666 commented 1 month ago

Yk what I can temporarily disable this for dev purposes and enable it when i push it to production as it seems that building it with lume works fine.

oscarotero commented 1 month ago

Yes, only the serve task is run in a Worker context. But this is a unfortunate limitation. I'll look into it.

oscarotero commented 1 month ago

@illyrius666 I just implemented localStorage support in server mode. Can you confirm if it works fine?

You have to upgrade Lume to the latest development version (deno task lume upgrade --dev). If it works fine, I'll release a new stable version.

illyrius666 commented 1 month ago

@oscarotero log:

 *  Executing task: deno task serve 

Task serve deno task lume -s
Task lume echo "import 'lume/cli.ts'" | deno run -A - "-s"
Loading config file file:///workspaces/IllyrionWebsite/_config.ts
Download ⣾ [00:05] 222/225
error: Uncaught (in worker "") (in promise) Error: The service was stopped
      if (error) return callback(new Error(error), null);
                                 ^
    at https://deno.land/x/esbuild@v0.24.0/mod.js:943:34
    at Object.responseCallbacks.<computed> (https://deno.land/x/esbuild@v0.24.0/mod.js:597:9)
    at afterClose (https://deno.land/x/esbuild@v0.24.0/mod.js:588:28)
    at https://deno.land/x/esbuild@v0.24.0/mod.js:1788:11
    at eventLoopTick (ext:core/01_core.js:175:7)
error: Uncaught (in promise) Error: Unhandled error in child worker.
    at Worker.#pollControl (ext:runtime/11_workers.js:204:19)
    at eventLoopTick (ext:core/01_core.js:175:7)

 *  The terminal process "/usr/bin/zsh '-c', 'deno task serve'" terminated with exit code: 1. 
 *  Terminal will be reused by tasks, press any key to close it. 

Let me know when you need more information, btw when i dont use localstorage everything works fine.

oscarotero commented 1 month ago

do you have a repo where I can reproduce this?

illyrius666 commented 1 month ago

do you have a repo where I can reproduce this?

https://github.com/XodiumSoftware/XodiumSoftware.github.io its the repo for my website, and its public, you have my permission to use it to reproduce the error. use branch: v2.0.2

oscarotero commented 1 month ago

Thanks! It was a bug. It should work fine now. Can you upgrade Lume again (deno task lume upgrade --dev) and confirm?

illyrius666 commented 1 month ago

@oscarotero yes it works!