Assets referenced by CSS are missing from node_module

[quijote]

I tried using wunderbaum in a new React Typescript app.

I created the app with npx create-react-app my-app --template typescript: https://create-react-app.dev/docs/getting-started#creating-a-typescript-app

After that ran npm install wunderbaum and started using it in my component:

import {Wunderbaum} from 'wunderbaum'
...

However this currently produces

Module not found: Error: Can't resolve '../docs/assets/drop_marker_16x32.png' in '...\wunderbaum_react_ts_demo\node_modules\wunderbaum\dist'

CSS currently references two PNGs:

content: url(../docs/assets/drop_marker_16x32.png);
content: url(../docs/assets/drop_marker_insert_16x64.png);

They don't seem to be included in the published module.

wunderbaum_react_ts_demo/node_modules/wunderbaum (main)
$ find
.
./dist
./dist/wunderbaum.css
./dist/wunderbaum.d.ts
./dist/wunderbaum.esm.js
./dist/wunderbaum.esm.min.js
./dist/wunderbaum.esm.min.js.map
./dist/wunderbaum.umd.js
./dist/wunderbaum.umd.min.js
./dist/wunderbaum.umd.min.js.map
./LICENSE
./package.json
./README.md
./src
./src/common.ts
./src/debounce.ts
./src/deferred.ts
./src/drag_observer.ts
./src/types.ts
./src/util.ts
./src/wb_extension_base.ts
./src/wb_ext_dnd.ts
./src/wb_ext_edit.ts
./src/wb_ext_filter.ts
./src/wb_ext_grid.ts
./src/wb_ext_keynav.ts
./src/wb_ext_logger.ts
./src/wb_node.ts
./src/wb_options.ts
./src/wunderbaum.scss
./src/wunderbaum.ts

To make it easier to reproduce the problem I am sharing the entire application here: https://github.com/quijote/wunderbaum_react_ts_demo

Please be aware that I have implemented a workaround to the problem in the last commit. The problem should reproduce with commit 31256c28dcaf63e8a4a15cc17773eda1f7367524. Simply clone and run npm start.

Additional notes

It would be nice to directly import the wunderbaum CSS from a TSX file instead of a CSS file. Similar to:

import 'bootstrap-icons/font/bootstrap-icons.css'

This is currently not possible due to the quite restrictive exports in package.json:

  "exports": {
    ".": {
      "require": "./dist/wunderbaum.umd.min.js",
      "import": "./dist/wunderbaum.esm.min.js",
      "style": "./dist/wunderbaum.css"
    }
  },

Maybe it is even possible to include it transitively from the wunderbaum TS/JS files somehow.

Also, it took me some time to realize that I need to install bootstrap-icons and import 'bootstrap-icons/font/bootstrap-icons.css' myself. Maybe this could also be added as a transitive dependency of wunderbaum somehow.

Another thing that could be improved is to not make the following options required in TypeScript:

      debugLevel: 4,
      edit: undefined,
      filter: undefined,
      grid: undefined

Finally, thanks for the awesome work. I had the pleasure to use fancytree in two previous internal projects. When I started to learn about TypeScript and React two weeks ago, I first thought about trying to embedd fancytree in my app somehow. I was happy to see there is already ongoing effort to create something similarly powerful (and fast) in TypeScript now.

[mar10]

Thanks for contributing!

Adding the two images as data-url may be an alternative way I guess, since it might prevent slight delays when starting a d'n'd operation? Also, I'll make the four options optional.

Note that bootstrap icons are not a mandatory dependency, but simply the icon font that I used for the demos so far (and provided as default map).

My goal is to keep Wunderbaum framework agnostic. However I certainly wold like to make it easy to integrate into major frameworks, like React, Angular, Vue, Svelte, ... Admittedly I don't have much hardly any experience with React so far, so again, hthanks for the heads up.

[mar10]

Could you test with the lates release?

[quijote]

Quickly tried the latest version 0.3.1 and problems described in the two tickets seem to be resolved now.

Currently I import wunderbaum.css within my own CSS file:

@import url("wunderbaum");

However in React people sometimes seem to prefer to include both TS and CSS files from TSX files:

import {Wunderbaum} from 'wunderbaum'
import 'wunderbaum/wunderbaum.css'

I am not sure if this is good practice, but the following in package.json would enable such imports:

  "exports": {
    ".": {
      "require": "./dist/wunderbaum.umd.min.js",
      "import": "./dist/wunderbaum.esm.min.js",
      "style": "./dist/wunderbaum.css"
    },
    "./wunderbaum.css": "./dist/wunderbaum.css"
  },

Also, an exception is still triggered when I double click on a node in the tree. But it's probably better to deal with that separately.

[mar10]

However in React people sometimes seem to prefer to include both TS and CSS files from TSX files:

Does this work?

import 'wunderbaum/dist/wunderbaum.css'

Also, an exception is still triggered when I double click on a node in the tree. But it's probably better to deal with that separately.

Fixed. Thanks for reporting

[quijote]

import 'wunderbaum/dist/wunderbaum.css'

produces

ERROR in ./src/App.tsx 10:0-40
Module not found: Error: Package path ./dist/wunderbaum.css is not exported from package ...\wunderbaum_react_ts_demo\node_modules\wunderbaum (see exports field in ...\wunderbaum_react_ts_demo\node_modules\wunderbaum\package.json)

[mar10]

Sorry, there was a problem with the build script. Please try again with 0.3.3

[quijote]

Works with 0.3.3. Feel free to close the ticket.