chore: Convert to Deno

[ebebbington]

Many changes:

• Removes eslint, and uses deno lint instead
• Option to use deno fmt is available
• Removed all npm dependencies, and replaces scripts with scripts for deno
• Creates a new compile.ts file, in place of tsc, which uses 2 unstable api's
• Adds .ts extensions to imports for src instead of .js (to pass emit checks)
• Remove tsconfig.json and package-lock.json as they are no longer needed
• A new examples_mod.ts inside src so we can properly emit the examples. Reason for this is, they aren't part of the dependency free for mod.ts so aren't included in the emit result. Due to this, we compile examples_mod.ts too. Not worth compiling each individual file instead because that takes a long time. As it stands, running compile.ts is faster than tsc/webpack

Of course it's completely down to you @0kku, as to whether you want to request changes, let along approve this PR, it's all welcomed and i completely understand

So how do you, Okku, and an end user use destiny now?

Good question edward

As the maintainer of Destiny, you would:

• Setup a webhook to deno.land, now anyone using Deno can import the src/*.ts files fine
• npm run compile and deploy as you usually would this generates maps, declaration files and js files, so you can import it in the browser for js files

As a user of Destiny:

• Import destiny from deno.land
• or import destiny from the destiny cdn

TODO

• Discuss examples directory: do we keep it as a test tool for @0kku? Do we migrate it into docs? (associated thread: chore: Convert to Deno #17 (comment))

[0kku]

Shouldn't this be import type?

[0kku]

Apparently import type is not supported without importing something specific. However, the way it is in its current form is not ideal, because it'll be importing this file even at runtime if it's not a type import.

[ebebbington]

This is more a way around using a globalThis.d.ts - it's just to include that type in the global scope

Saying this, where does it mention replace exists on CSSStyleSheet? Not the one ou define, but I remember you saying that the lib doesn't have it defined (yet) but it does exist, or something along those lines?

[0kku]

Saying this, where does it mention replace exists on CSSStyleSheet? Not the one ou define, but I remember you saying that the lib doesn't have it defined (yet) but it does exist, or something along those lines?

Here's the MDN page and here's some additional documentation.

[0kku]

The problem with import "./path" is that it shows up in the final compiled output, which is why type-only imports need to be imported with import type to avoid there being extraneous junk in the output.

[ebebbington]

Ok gotcha, looked through the code and can understand this better

I don't think importing it as a type is a possibility, and if you wanna avoid junk then i think the next best thing would be slapping a ts ignore on it :/ But ill keep thinking

[ebebbington]

Or another 'hack' would be modifying that global type file to just export an interface, and do something like:

// globaltypes/cssstylesheet.ts
export intrface ICSSStyleSheet extends CSSStyleSheet {
  replace: (css: string) => void
}

// styling/CSSTemplate.ts
import type { ICSSStyleSheet } from ...

...

  (this.#stylehsheet as ICSSStyleSheet).replace(this.cssText)

[ebebbington]

or do #stylesheet: ICSSStyleSheet | undefined instead (keeping the interface we import too)

[0kku]

Seems like doing the cast might be the least bad option.

[ebebbington]

2f82977

[ebebbington]

formatting wasn't part of the project before, so remove this

[ebebbington]

remove this

[0kku]

Don't remove it yet, I'll have a look at what it looks like and see if it's useful to keep once I get some time.

[0kku]

Love the latest commit message lol.

[ebebbington]

Purely making a note here so I remember to remove the examples directory - would be great if we could turn these into tutorials :)

[0kku]

Yeah honestly the examples don't make a ton of sense as part of the lib core, but that's where I run the tests, so I don't know if it's feasible to remove the examples completely 😬

[ebebbington]

It was more to help both us understand if it works for each environment :) After all we could turn the 'setups' into written tutorials

though i see what you mean...might be worth something to you, just maybe there's a better place to put these directories?

[0kku]

I might've actually misunderstood what you meant, my bad. Ignore my previous comment.

[ebebbington]

resolving, pr desc now includes a note about this

[ebebbington]

as of now, using canary (> 1.11.5) the infinite loop has gone, but revealed some more issues:

denoland/deno#11286
denoland/deno#11287

[ebebbington]

3647b7f does address both issues mentioned above, though of course it is a tiny workaround

[0kku]

3647b7f does address both issues mentioned above, though of course it is a tiny workaround

Could've just moved the cleanup method outside the class, since it's doing nothing with the instance anyway.

[ebebbington]

3647b7f does address both issues mentioned above, though of course it is a tiny workaround

Could've just moved the cleanup method outside the class, since it's doing nothing with the instance anyway.

Guess that's your preferred way then :P Is this approach something you're ok with?

[ebebbington]

Note about this file that i want to mention:

If instead of setting the path to the js file inside the tab-view.ts, we imported the class and passed it in, we wouldn't need the examples_mod.ts file, and would only need to emit _examples/main.ts, so for example:

// src/_examples/components/tab-view.ts
import { AllComponents } from "all the files we need"

class TabView {
  #tabs = [
    {
      url: "/array-demo",
      component: ArrayDemo // before, it would be "./components/array-demo.js"
    }
  ]
}

Of course the hash router would need to account for this.

Curious on your thoughts @0kku?

[0kku]

That would make it into a static import. It's intentionally dynamic: the component is not loaded until the user clicks on the tab. This makes initial load faster and avoids loading a potentially substantial number of pages that the user wasn't interested in visiting anyway. It's not a big deal on the example page because it's very small, but it's an example on how to do code splitting for a large website that could potentially have hundreds of large pages.

[ebebbington]

very very good point 👍