(Typescript) Consuming custom modules inside modules. .. Umbraco #package-development

(Typescript) Consuming custom modules inside modul...

Kevin Jump

04/19/2024, 2:44 PM

I have - because its the way its built - ended up with a series of packages that absorb the code / elements from other packages. e.g

uSync.Publisher

uses code from

uSync.Expansions.Core

and

uSync

when this is custom elements (like

<usync-report-view>

or something) then this all works fine, because really there is no code . but now because i am being tidy, i've just moves some of the code from the publisher package into the "core" one, and i want to base the publisher stuff of these core elements. e.g in my

usync-expansions

module i have a base SignalRHub class.

SyncSignalRHub

and inside my uSync.Publisher code i want to base off that.

Copy code

ts
import { ISyncUpdateMessage, SyncSignalRHub } from '@jumoo/usync-expansions/processing';

export class SyncPublisherSignalRHub extends SyncSignalRHub {

i've build and publish (to a private npm repo) the usync-expansions module, included it and this all works lovey .... in vscode. but when i got to umbraco, with this i get the following ...

Copy code

Uncaught (in promise) TypeError: Failed to resolve module specifier "@jumoo/usync-expansions/processing". Relative references must start with either "/", "./", or "../".

which i think it because the build process publisher model has compile the code down, but left in the refrences to the model i can see this in the compiled javascipt

Copy code

import { SyncSignalRHub as Rn, SyncProcessingBaseContext as In, SyncProcessingElement as xn } from "@jumoo/usync-expansions/processing";

a) now i think what i actually want it to do is compile the code into the "publish" module ? so it doesn't attempt to load something that isn't there ? or b) is there something i should be doing so

@jumoo/usync-expansions

works in the browser i suspect its a) anyone know the secret source to get (a) working ?

Kevin Jump

04/19/2024, 3:31 PM

update: This looks like its more about how i am creating the package then absorbing it

Kevin Jump

04/19/2024, 3:34 PM

I changed my vite config rollup section to this :

Copy code

ts
rollupOptions: {
    external: [/^@umbraco/],
    onwarn: (warn) => {
        console.log('warn', warn);
    },
},

and got some messages :

Copy code

js
warn {
  message: '[plugin vite:esbuild] src/servers/pickers/connected-servers-property.element.ts: \x1B[33mThe "??" operator here will always return the left operand\x1B[39m\n' +
    '42 |  \n' +
    '43 |  \t\tif (exists?.length == 0) {\n' +
    '44 |  \t\t\tconst servers = [...(this.allowedServers ?? []), result.allowedServer] ?? [];\n' +
    '   |                                                                            ^\n' +
    '45 |  \n' +
    '46 |  \t\t\tthis.#dispatchUpdate(servers);\n',
  id: 'C:/Source/Products/v14/uSync.Complete/uSync.Publisher.Client/usync-publisher-assets/src/servers/pickers/connected-servers-property.element.ts',
  hook: 'transform',
  code: 'PLUGIN_WARNING',
  plugin: 'vite:esbuild',
  [Symbol(augmented)]: true
}

which explains why its behaving this way. but it' means my module is wrong, and looking at it, its because it only contains .ts files not the .js files next to them (e.g i have

index.d.ts

but not

index.js

in the module so back to node module building school

Kevin Jump

04/19/2024, 4:06 PM

The very long and short of it is... its was vite all along .. (well probibly rollup). i was passing my script to build the /dist folder for my npm module throug the vite pipeline too. - if i actually "just" (with a few tweaks) ran the typescript build (

tsc

) it outputs what i wanted in the module. - then i publish and import that version - then the build on the childproject inlines the

import ... @jumoo...

code. - everything loads in the umbraco back office ! 🍺 🕰️

Previous Next