astrimid - Trying to use runframe package: V...

there's no way to automate runframe updates if they don't list dependencies. I see a lot of things listed in devDependencies that should really be runtime dependencies. If you have versioning conflicts with downstream packages, I don't see how it wouldn't be a problem with runframe if you don't list dependencies at all

"tscircuit" as a package provides a ton of transient dependencies, it isn't always simple

so it's a polyrepo but a single workspace, seems to be worst of both worlds

this is a very large codebase

(there are 500 repos)

so, can I install tscircuit/tscircuit and get runframe depdendencies for free?

probably!

here's dependency tree according to npm

yea that's an old version from our docs

latest version here: https://docs.tscircuit.com/contributing/package-dependencies-and-auto-updates

those are the "major" dependencies

but the autorouter alone (which is excluded from that diagram because it has a special release team) has almost 100 dependencies itself haha but those are absolutely the major ones

no, some packages don't have dependents at all.

something is seriously wrong with package.json/build pipeline. it means those are not real packages, just code that happens to be on npm - monorepo code that published to npm as a side effect. you might as well not publish to npm at all

the packaging is not perfect but it is usab.e. I have no idea what the "dependent" packages are there, since they are unaffiliated users of the library (presumably)

npm tracks all package that lists the package in question in "dependencies" as a dependent. if you don't have pcv-vewier in depedendencies of any of your repos, that means you have a build pipeline that doesn't use npm

for example, why `footprinter` is a `devDependency` of `tscircuit`? Does it not run in runtime?

why exactly all dependencies are devDependencies? I don't get it

So it's a deliberate design choice: https://github.com/tscircuit/lint/issues/4

this is expected behavior when you use 0.0.x packages. npm duplicates 0.0.x dependencies because semVer standard treats every 0.0.x version as containing breaking changes. had you used compatible versions, such as "1.0.*", npm would've always installed the latest version of the package, which is what you probably want

ah that's interesting, i didn't know npm had that special 0.0.x behavior

we should increment to 0.1.x for everything

if we have to do 1.x.x that's OK but not my preference hahaha

this is actually the whole reason why npm ecosystem works. if there's incompatibility, the package is silently duplicated and there's no problem

if the versions are deemed compatible by the semver convention, npm deduplicates packages and installes the minimum compatible combination

if you want to force package version to be compatible, you can put `"overrides"` in `package.json` root and it would use that single version for all dependencies

i think for most users, they only need to use "tscircuit"

so you're basically talking about internal ecosystem stuff for the most part, even for startups building on tscircuit, they can just use "tscircuit"

because there is special bundling etc. it really isn't possible to use the dependency system as is

you could look at tsup's bundling behavior if this sounds interesting, but i think it's much easier to just have the ecosystem consume "tscircuit" because we can provide strong contracts for that usage

``` { "overrides": { "tscircuit": "0.0.2030", "@tscircuit/runframe": "0.0.2128" } } ```

what do you mean by `tscircuit`? how do I install tscircuit package with all the dependencies so that I could embed runframe?

are you suggesting forking or what?

you should be able to do `bun add -D tscircuit @tscircuit/runframe` and you'll have all the dependencies you need no?

i don't think you need overrides

that's exactly what I did:

``` "scripts": { "dev": "bunx vite", "build": "bunx vite build", "preview": "bunx vite preview" }, ```

``` import { RunFrame } from "@tscircuit/runframe" ... <div style={{ flex: 1, overflow: 'hidden' }}> <RunFrame fsMap={{ "main.tsx": DEFAULT_CIRCUIT }} entrypoint="main.tsx" /> </div> ```

is ther any example project I could look up ?

i think that's a bug

afaik, npm doesn't have any way to install transitive devdependencies

circuit-json-to-pnp-csv should be built in

there are no transitive dev deps, dev deps are BUNDLED

so "marked" is, for some reason, not being bundled

which means it needs to either be provided as a transitive dependency by tscircuit or as a bundled dependency for runframe

CC <@452450065941004289> & <@809856037376491570> do you guys know what's up with marked?

maybe something with bun version?

circuit-json-to-pnp-csv should be inside the main tscircuit/tscircuit package.json so that is a legit bug

``` bun --version 1.3.14 ```

I'm importing via `import { RunFrame } from "@tscircuit/runframe"` is there a way to import from `@tscircuit/core` or someting

No idea

maybe it's a big dep so deliberately excluded, but honestly astramid i would just work around those with a temporary install of the two missing deps

we'll patch the issue tho

just need to figure out why chestertons fence is there on marked

it's not just two, there are hundreds of deps missing. could you provide any starter bun/vite project with runframe?

so that we could isolate whether it's environment issue or a bug

Let me try to see if I can create a runframe project

maybe it's a vite issue? ``` ✘ [ERROR] Failed to resolve entry for package "@tscircuit/core". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle] node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:46638:18: 46638 │ const err = new Error( ```

LLM suggests that `yalc add @tscircuit/runframe` is the only way to use tscircuit

fwiw you can always use the iframe method of running runframe

but i think Rishabh is looking into this now so we should know shortly

you mean embedding from tscircuit.com?

https://docs.tscircuit.com/guides/running-tscircuit/running-tscircuit-inside-an-iframe

Could be vite bundler conflict? ``` ✘ [ERROR] Missing "./iframe" specifier in "@tscircuit/runframe" package [plugin vite:dep-scan] node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:46042:28: ... This error came from the "onResolve" callback registered here: node_modules/vite/dist/node/chunks/dep-BK3b2jBa.js:49789:12: 49789 │ build.onResolve( ╵ ~~~~~~~~~ The plugin "vite:dep-scan" was triggered by this import src/App.tsx:1:35: 1 │ import { RunFrameWithIframe } from "@tscircuit/runframe/iframe" ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ```

do you use bun or vite?

I was able to run a small runframe project with only `runframe` and `tscircuit` just make sure you are using the `standalone` bundle from runframe. This is the zip generated from ai if you wanna take a look

can't see attachments

what is standalone bundle?

You can import the standlone by `@tscircuit/runframe/standalone`

https://drive.google.com/file/d/171IoymPBymTcwrSeB5eLCHr2vaZi0p4w/view?usp=drive_link

calculate-cell-boundaries uses react 18 in dependencies: https://github.com/tscircuit/calculate-cell-boundaries/blob/a44e1edc42fec857399421f60973a05923a1d969/package.json#L19 while it should really be peer dependencies ^17.0.0 || ^18.0.0 || ^19.0.0 like radix

similarly, jscad-electronics uses ^19, so it's marked as incompatible with calculate-cell-boundaries: https://github.com/tscircuit/jscad-electronics/blob/3644ce6ab469fc83b27a090b1529b0a8120472c2/package.json#L54

similar issue: tscircuit-viewer (requires ^18.2.0) react-reconciler@0.32.0 (requires ^19.1.0) use-mouse-matrix-transform@1.3.5 (requires ^18.2.0) tscircuit@0.0.2166 (requires ^19.1.0)

so even for such a basic dependency as react, version dependency is inconsistent

I don't know whether it means duplicate react versions or whether react is bundled or is it really a peer dependency

hmm

calculate-cell-boundaries should only be using dev deps

usually we try to use "*" for peer deps

more errors: ``` ✘ [ERROR] No matching export in "node_modules/@tscircuit/checks/dist/index.js" for import "dedupePcbDrcErrors" node_modules/@tscircuit/core/dist/index.js:15106:2: 15106 │ dedupePcbDrcErrors, ╵ ~~~~~~~~~~~~~~~~~~ ✘ [ERROR] No matching export in "node_modules/@tscircuit/circuit-json-util/dist/index.js" for import "getSchematicElementBounds" node_modules/@tscircuit/core/dist/index.js:34618:2: 34618 │ getSchematicElementBounds ╵ ~~~~~~~~~~~~~~~~~~~~~~~~~ 1467 | let { file, line, column } = e.location; 1468 | let pluginText = e.pluginName ? `[plugin: ${e.pluginName}] ` : ""; 1469 | return ` 1470 | ${file}:${line}:${column}: ERROR: ${pluginText}${e.text}`; 1471 | }).join(""); 1472 | let error = new Error(text); ^ error: Build failed with 2 errors: node_modules/@tscircuit/core/dist/index.js:15106:2: ERROR: No matching export in "node_modules/@tscircuit/checks/dist/index.js" for import "dedupePcbDrcErrors" node_modules/@tscircuit/core/dist/index.js:34618:2: ERROR: No matching export in "node_modules/@tscircuit/circuit-json-util/dist/index.js" for import "getSchematicElementBounds" ```

apparently, because core doesn't specify versions it depends on, so bun install succeeeds, but it runtime fails

├─ @tscircuit/3d-viewer@0.0.15 (requires ^18.3.1) ├─ @tscircuit/schematic-autolayout@0.0.5 (requires ^18.2.0) ├─ calculate-cell-boundaries@0.0.13 (requires ^18.3.1) so there are 3 tscircuit package that require react 18. Maybe I can' update them

updating those 2 helped, so that leaves only one, ├─ calculate-cell-boundaries@0.0.13 (requires ^18.3.1)

<@809856037376491570> is this a calculate-cell-boundaries issue?

i don't know, the example repro by AI is using the runframe standalone bundle without having any deps issue

success. `overrides` helped to fix the duplicate react 18/19 issue. I had to manually specify all the dependencies and tweak versions.

^ this is not using standalone

Ok

now I have a strange bug, the schematic view is moving down

maybe the issue of using 100vh

it's not moving per see, it appears the height is growing uncontrollably

the height of svg seems to be incrementing 20 times per second

``` const svgDiv = useMemo( () => ( <div ref={svgDivRef} style={{ pointerEvents: clickToInteractEnabled ? isInteractionEnabled ? "auto" : "none" : "auto", transformOrigin: "0 0", }} className={ onSchematicComponentClicked ? "schematic-component-clickable" : undefined } onTouchStart={(e) => { if (editModeEnabled && isInteractionEnabled && !showSpiceOverlay) { handleComponentTouchStartRef.current(e) } }} // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> dangerouslySetInnerHTML={{ __html: svgString }} /> ), [ svgString, isInteractionEnabled, clickToInteractEnabled, editModeEnabled, showSpiceOverlay, ], ) ```

This is a workaround: ``` containerStyle={{ width: "100vw", height: "100vh", backgroundColor: "#f8f9fa", }} ```

I've summariesed the `devDependencies` issue in a separate thread. The schematic-viewer issue and react conflict are separate issues. https://community.tscircuit.com/thread/1531639565788647506