Error: Jieba was loaded, could not load again
at C:\Users\Dennis\Documents\Hobby\smOOthi\src\hooks.server.js:12:1
at async instantiateModule (file:///C:/Users/Dennis/Documents/Hobby/smOOthi/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9) {
code: 'GenericFailure'

I still sometimes get this error, even though I thought it is only executed once

C:/Users/Dennis/Documents/Hobby/smOOthi/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:116
throw new Error(
^

Error: Cannot call fetch eagerly during server side rendering with relative URL (/api/translate_sentence) — put your fetch calls inside onMount or a load function instead
at globalThis.fetch (C:/Users/Dennis/Documents/Hobby/smOOthi/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:116:17)
at loadSentenceTranslations (C:/Users/Dennis/Documents/Hobby/smOOthi/src/routes/read/[id]/Pagination.svelte:34:25)
at eval (C:/Users/Dennis/Documents/Hobby/smOOthi/src/routes/read/[id]/Pagination.svelte:58:24)
at Object.$$render (C:/Users/Dennis/Documents/Hobby/smOOthi/node_modules/svelte/src/runtime/internal/ssr.js:174:16)
at eval (C:/Users/Dennis/Documents/Hobby/smOOthi/src/routes/read/[id]/+page.svelte:65:352)
at Object.$$render (C:/Users/Dennis/Documents/Hobby/smOOthi/node_modules/svelte/src/runtime/internal/ssr.js:174:16)
at Object.default (C:/Users/Dennis/Documents/Hobby/smOOthi/.svelte-kit/generated/root.svelte:93:142)
at eval (C:/Users/Dennis/Documents/Hobby/smOOthi/src/routes/read/[id]/+layout.svelte:24:41)
at Object.$$render (C:/Users/Dennis/Documents/Hobby/smOOthi/node_modules/svelte/src/runtime/internal/ssr.js:174:16)
at Object.default (C:/Users/Dennis/Documents/Hobby/smOOthi/.svelte-kit/generated/root.svelte:82:133)

I currently also include user_id in the Texts2 table. Not sure if that is neccessary if I already check the user_id in text metadata.

Make the Texts not wordbased, but sentence based and then store the words in a list. I think that would simplify the calls and also allow for the sentence translations to be included more easily

// TODO make the snapshot work, I think the await needs to depend on if there already was a translation
// export const snapshot = {
// 	capture: () => [sentenceTranslation, wordTranslations],
// 	restore: (value) => [sentenceTranslation, wordTranslations] = value
// };

+page.svelte in offset

Currently, translation is done when a new page is created.

We could also do the translation once when the document is added to the database, but maybe we want to keep some dynamic translation capabilities.

Seems to be a bug where the wrong images are loaded in page navigation (not when reloading)

Due to bundling, fs reads are hard to do on vercel. My current solution now is // try {
// const response = await fetch('/dict.txt.big'); // Adjust the path if necessary
// const dictText = await response.text();
// const dictBuffer = Buffer.from(dictText);
// loadDict(dictBuffer);
// } catch (err) {
// console.error('Error loading dictionary:', err);
// }

However:
I get an error in the fetch I use
not sure if the place in the hooks is the best as the startup time is higher then?

https://github.com/Eoli-an/smOOthi/blob/c202e7c26817844b21a1d0ce11a4fecd238036c7/src/routes/read/%5Bid%5D/%2Bpage.server.ts#L5

only quick fix, see https://stackoverflow.com/questions/41292559/could-not-find-a-declaration-file-for-module-module-name-path-to-module-nam

Skeleton and Flowbite did not seem to work, they both still showed page content.

For my custom Modal I used https://www.shaunchander.me/effective-modals-in-sveltekit, but I can still not click back when clicking on the navbar.

See https://github.com/CaptainCodeman/svelte-theme-select

https://pyronaur.com/dark-mode

https://github.com/chanced/schemable-svelte

Should translations be word or char level based?
Probably a mixture, but how to combine nicely?

Maybe:
if both characters are unkown, display word translation
if one character is know, display this+the char level translation, in order to foster the creation of mnemonics

export const GET: RequestHandler = async ({ url, locals: { supabase } }) => {
  const token_hash = url.searchParams.get('token_hash')
  const type = url.searchParams.get('type') as EmailOtpType | null
  const next = url.searchParams.get('next') ?? '/'

  /**
   * Clean up the redirect URL by deleting the Auth flow parameters.
   *
   * `next` is preserved for now, because it's needed in the error case.
   */
  const redirectTo = new URL(url)
  redirectTo.pathname = next
  redirectTo.searchParams.delete('token_hash')
  redirectTo.searchParams.delete('type')

  if (token_hash && type) {
    const { error } = await supabase.auth.verifyOtp({ type, token_hash })
    if (!error) {
      redirectTo.searchParams.delete('next')
      redirect(303, redirectTo)
    }
  }

  redirectTo.pathname = '/auth/error'
  redirect(303, redirectTo)
}

this is the code for it, I think its called from auth.signup

PS C:\Users\Dennis\Documents\Hobby\smOOthi> pnpm i -D svelte-heros-v2
 WARN  Moving vite that was installed by a different package manager to "node_modules/.ignored"
 EPERM  EPERM: operation not permitted, rename 'C:\Users\Dennis\Documents\Hobby\smOOthi\node_modules\vite' -> 'C:\Users\Dennis\Documents\Hobby\smOOthi\node_modules.ignored\vite'

failed to load config from C:\Users\Dennis\Documents\Hobby\smOOthi\vite.config.ts
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@sveltejs/kit' imported from C:\Users\Dennis\Documents\Hobby\smOOthi\vite.config.ts.timestamp-1721040289043-315d85383a2b5.mjs
at packageResolve (node:internal/modules/esm/resolve:844:9)
at moduleResolve (node:internal/modules/esm/resolve:901:20)
at defaultResolve (node:internal/modules/esm/resolve:1121:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36)

Bug where there is no image available in the dict char even though there should be

Not sure where to place the translation functionality and if it should be an API call. GPT says this:

Advantages of Using an API Route with +server.ts:

1. Separation of Concerns:
   By defining an API route, you separate the server-side logic (like handling API requests and interacting with databases) from the client-side components. This makes the codebase easier to manage and scale.
2. Reusability:
   API routes can be called from anywhere in your application or even from external applications. This makes it easy to reuse the same API for different parts of your application or for different projects.
3. Security:
   API routes allow you to handle sensitive operations on the server side, away from the client. For example, user authentication, data validation, and database operations can be securely managed.
4. Performance Optimization:
   Server routes can be optimized for performance by handling data processing on the server, thus reducing the load on the client side. This can be particularly beneficial for operations that require heavy lifting, like large data manipulations or complex calculations.
   Disadvantages of Using an API Route with +server.ts:
5. Complexity in Setup:
   Setting up API routes requires a good understanding of server-side programming and might introduce additional complexity in terms of configuration and deployment compared to simple client-side logic.
6. Overhead:
   Each API call introduces network latency, which might not be ideal for operations that require real-time responses. Managing high traffic on server routes can also lead to increased server load and might require more sophisticated scaling solutions.
7. Dependency on Network:
   The application's functionality becomes dependent on the availability of the server. If the server goes down or if there are network issues, the parts of the application relying on these API routes will not function.
8. Development and Maintenance Costs:
   Maintaining an API involves additional costs related to server management, security updates, and compliance with data protection regulations, which might be more demanding compared to purely client-side or static solutions.
   Conclusion:
   Using an API route with +server.ts is beneficial for handling complex, secure, and reusable server-side logic. However, it introduces additional complexity and overhead. The choice between implementing logic directly in a server load function versus using an API route should be based on the specific needs of the application, considering factors like security, performance, and maintainability.

There probably is a way better way:

Combine the common elements of char dict and word dict in a toplevel layout

07:49:36 [vite] Error when evaluating SSR module /src/hooks.server.js:
|- Error: Jieba was loaded, could not load again
at C:\Users\Dennis\Documents\Hobby\smOOthi\src\hooks.server.js:12:1
at async instantiateModule (file:///C:/Users/Dennis/Documents/Hobby/smOOthi/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9)

Error: Jieba was loaded, could not load again
at C:\Users\Dennis\Documents\Hobby\smOOthi\src\hooks.server.js:12:1
hKeNLxG.js:55071:9) {
code: 'GenericFailure'
}
Error: Jieba was loaded, could not load again
at C:\Users\Dennis\Documents\Hobby\smOOthi\src\hooks.server.js:12:1
at async instantiateModule (file:///C:/Users/Dennis/Documents/Hobby/smOOthi/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9) {
code: 'GenericFailure'
}

This error still occurs sometimes, fix it

Add ability for Anonymous Sign-Ins, see https://supabase.com/docs/guides/auth/auth-anonymous

https://supabase.com/docs/guides/storage/serving/image-transformations#optimizing

supabase can do this, but only on the Pro Plan

Why don't I just preprocess the text in the beginning when the document is uploaded? Why would I do it dynamically?

// This will only run once when the app starts, exactly what I want I think because jieba can only be loaded once
// https://stackoverflow.com/a/76505892
// (Problem was previously also that jieba.cut also calls init)
//TODO this stilll doesn't work sometimes

// try {
// const response = await fetch('/dict.txt.big'); // Adjust the path if necessary
// const dictText = await response.text();
// const dictBuffer = Buffer.from(dictText);
// loadDict(dictBuffer);
// } catch (err) {
// console.error('Error loading dictionary:', err);
// }

// initialize directly, otherwiese long cold start
// @ts-ignore
import * as hanzi from 'hanzi';
hanzi.start();

// try {
// loadDict(fs.readFileSync(staticPath))
// }
// catch (err) {
// console.log(err);
// }

https://github.com/Eoli-an/smOOthi/blob/5291f58864d31e86529de7e42d8365f132167be2/src/routes/read/%5Bid%5D/%2Bpage.ts#L5

@node-rs/jieba only works on server, thus export const csr = false;
Might be better to do it client side, there are other packages for it

I am not sure if the the knownWords store structure as currently implemented is optimal. See https://dev.to/jdgamble555/the-correct-way-to-use-stores-in-sveltekit-3h6i

When do I use which?
in my char element:

<!-- <a
href="/dictionary/${char}"
on:click={async (e) => {

    // prevent navigation
    e.preventDefault();

    const { href } = e.currentTarget;

    // run `load` functions (or rather, get the result of the `load` functions
    // that are already running because of `data-sveltekit-preload-data`)
    const result = await preloadData(href);

    if (result.type === 'loaded' && result.status === 200) {
        goto(href);
        pushState(href, { selected: result.data });
        
    } else {
        // something bad happened! try navigating
        goto(href);
    }
}}
> -->
<button on:click={() => goto("/dictionary/${char}")}>
    {#if displayType === 'character'}
        {char}
    {:else if image_available}
        <img src={imagePath} alt={char}/>
    {:else}
        {char}
    {/if}
</button>
<!-- </a> -->

Is the TextsMetadata table a good idea or just put everything in the same table?

https://supabase.com/docs/guides/database/postgres/row-level-security#rls-performance-recommendations

@node-rs/jieba does not seem to have pos bindings

nodejieba has, but installation fails (might be hints on the issue page)

https://www.npmjs.com/package/stanford-postagger also has pos tagging, but seems out of proportion

https://www.npmjs.com/package/rakutenma this one as well

Maybe have python backend after all, there it works

see https://kit.svelte.dev/docs/modules#$env-dynamic-private, and see https://supabase.com/docs/guides/auth/server-side/sveltekit

https://github.com/Eoli-an/smOOthi/blob/3ec1d07ffde3c0e110e79590d8017bef40a07130/src/routes/read/%5Bid%5D/%2Bpage.server.ts#L6C1-L7C28

[vite] Named export 'tify' not found. The requested module 'chinese-conv' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'chinese-conv';
const {tify} = pkg;

GPT:
To resolve this, you can use the alternative approach suggested in the error message, which is to import the module using the default export and then destructure the named exports from the default object.

But still issue

Could not find a declaration file for module 'chinese-conv'. 'c:/Users/Dennis/Documents/Hobby/smOOthi/node_modules/chinese-conv/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/chinese-conv if it exists or add a new declaration (.d.ts) file containing declare module 'chinese-conv';ts(7016)

Even though it is declared in app.d.ts. But code still works idk

Didn't get the modal to work with either flowbite nor skeleton, maybe try again sometime

Add profile name or smth to the user, see https://supabase.com/docs/guides/auth/managing-user-data