install issues - Githubissues

alxndr commented 1 week ago

I don't have Tailwind in this project yet; it would be helpful if the "install dependencies" step installed it for me or prompted me to do so.
The "app.css updated successfully" message should reflect the "global CSS file" path?

⟫ npx tzezars-datagrid@latest init
Need to install the following packages:
tzezars-datagrid@1.1.2
Ok to proceed? (y) y
✔ Where do you want to install the component? … ./src/lib/datagrid
✔ Where is your global CSS file? … ./src/styles/global.scss
✔ Where is your tailwind.config.[cjs|js|ts] located? … ./tailwind.config.ts
✔ Do you want to install dependencies? … yes
Tzezar's Datagrid component installed successfully!
app.css updated successfully!
Error: [Error: ENOENT: no such file or directory, open '/.../repo/tailwind.config.ts'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/.../repo/tailwind.config.ts'
}

Instead, I attempted the manual installation.

⟫ npx sv add --tailwindcss
# some tweaks necessary

⟫ npx tzezars-datagrid@latest init

# I start to integrate but I notice that shadcn is required
⟫ npx shadcn-svelte@latest init

# I resume integrating but notice that fast-sort is required
⟫ npm i -S fast-sort

# it appears that papaparse is also required...
⟫ npm i -S papaparse

Now I am getting Svelte to render, however on the page where I have started to integrate Datagrid, I see a lot of errors:

11:38:23 AM [vite] Pre-transform error: Failed to resolve import "bits-ui" from "src/lib/datagrid/shadcn/pagination.svelte". Does the file exist?
11:38:23 AM [vite] Pre-transform error: Failed to resolve import "$lib/components/ui/button/button.svelte" from "src/lib/datagrid/shadcn/show-head-filters-toggler.svelte". Does the file exist?
11:38:23 AM [vite] Pre-transform error: Failed to resolve import "$lib/components/ui/dropdown-menu" from "src/lib/datagrid/shadcn/copy-to-clipboard-menu.svelte". Does the file exist?
11:38:23 AM [vite] Pre-transform error: Failed to resolve import "$lib/components/ui/dropdown-menu" from "src/lib/datagrid/shadcn/export-menu.svelte". Does the file exist?
11:38:23 AM [vite] Pre-transform error: Failed to resolve import "$lib/components/ui/button/button.svelte" from "src/lib/datagrid/shadcn/fullscreen-toggler.svelte". Does the file exist?
11:38:23 AM [vite] Pre-transform error: Failed to resolve import "$lib/components/ui/dropdown-menu" from "src/lib/datagrid/shadcn/options-menu.svelte". Does the file exist?
11:38:23 AM [vite] Internal server error: Failed to resolve import "bits-ui" from "src/lib/datagrid/shadcn/pagination.svelte". Does the file exist?
  Plugin: vite:import-analysis
  File: /.../repo/src/lib/datagrid/shadcn/pagination.svelte:3:28
  6  |  import * as $ from "svelte/internal/client";
  7  |  import * as Select from '$lib/components/ui/select';
  8  |  import { Pagination } from 'bits-ui';
     |                              ^
  9  |  import { getContext } from 'svelte';
  10 |  import MaterialSymbolsLightChevronLeft from '../icones/MaterialSymbolsLightChevronLeft.svelte';
      at TransformPluginContext._formatError (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49255:41)
      at TransformPluginContext.error (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49250:16)
      at normalizeUrl (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64041:23)
      at async file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64173:39
      at async Promise.all (index 3)
      at async TransformPluginContext.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64100:7)
      at async PluginContainer.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49096:18)
      at async loadAndTransform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:51929:27)
      at async viteTransformMiddleware (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:61881:24)
11:38:23 AM [vite] Pre-transform error: Failed to resolve import "fast-xml-parser" from "src/lib/datagrid/fns/export-to-xml.ts". Does the file exist?
11:38:23 AM [vite] Internal server error: Failed to resolve import "$lib/components/ui/dropdown-menu" from "src/lib/datagrid/shadcn/export-menu.svelte". Does the file exist?
  Plugin: vite:import-analysis
  File: /.../repo/src/lib/datagrid/shadcn/export-menu.svelte:2:31
  5  |
  6  |  import * as $ from "svelte/internal/client";
  7  |  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
     |                                 ^
  8  |  import { getContext } from 'svelte';
  9  |  import TablerFileExport from '../icones/TablerFileExport.svelte';
      at TransformPluginContext._formatError (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49255:41)
      at TransformPluginContext.error (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49250:16)
      at normalizeUrl (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64041:23)
      at async file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64173:39
      at async Promise.all (index 2)
      at async TransformPluginContext.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64100:7)
      at async PluginContainer.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49096:18)
      at async loadAndTransform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:51929:27)
      at async viteTransformMiddleware (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:61881:24)
11:38:23 AM [vite] Internal server error: Failed to resolve import "$lib/components/ui/button/button.svelte" from "src/lib/datagrid/shadcn/fullscreen-toggler.svelte". Does the file exist?
  Plugin: vite:import-analysis
  File: /.../repo/src/lib/datagrid/shadcn/fullscreen-toggler.svelte:6:20
  8  |  import MaterialSymbolsFullscreenExit from '../icones/MaterialSymbolsFullscreenExit.svelte';
  9  |  import { getContext } from 'svelte';
  10 |  import Button from '$lib/components/ui/button/button.svelte';
     |                      ^
  11 |
  12 |  function Fullscreen_toggler($$anchor, $$props) {
      at TransformPluginContext._formatError (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49255:41)
      at TransformPluginContext.error (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49250:16)
      at normalizeUrl (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64041:23)
      at async file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64173:39
      at async Promise.all (index 5)
      at async TransformPluginContext.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64100:7)
      at async PluginContainer.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49096:18)
      at async loadAndTransform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:51929:27)
      at async viteTransformMiddleware (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:61881:24)
11:38:23 AM [vite] Internal server error: Failed to resolve import "$lib/components/ui/button/button.svelte" from "src/lib/datagrid/shadcn/show-head-filters-toggler.svelte". Does the file exist?
  Plugin: vite:import-analysis
  File: /.../repo/src/lib/datagrid/shadcn/show-head-filters-toggler.svelte:6:20
  8  |  import MaterialSymbolsLightFilterAltOffOutline from '../icones/MaterialSymbolsLightFilterAltOffOutline.svelte';
  9  |  import MaterialSymbolsLightFilterAltOutline from '../icones/MaterialSymbolsLightFilterAltOutline.svelte';
  10 |  import Button from '$lib/components/ui/button/button.svelte';
     |                      ^
  11 |
  12 |  function Show_head_filters_toggler($$anchor, $$props) {
      at TransformPluginContext._formatError (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49255:41)
      at TransformPluginContext.error (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49250:16)
      at normalizeUrl (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64041:23)
      at async file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64173:39
      at async Promise.all (index 5)
      at async TransformPluginContext.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64100:7)
      at async PluginContainer.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49096:18)
      at async loadAndTransform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:51929:27)
      at async viteTransformMiddleware (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:61881:24)
11:38:23 AM [vite] Internal server error: Failed to resolve import "$lib/components/ui/dropdown-menu" from "src/lib/datagrid/shadcn/copy-to-clipboard-menu.svelte". Does the file exist?
  Plugin: vite:import-analysis
  File: /.../repo/src/lib/datagrid/shadcn/copy-to-clipboard-menu.svelte:2:31
  5  |
  6  |  import * as $ from "svelte/internal/client";
  7  |  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
     |                                 ^
  8  |  import { getContext } from 'svelte';
  9  |  import MaterialSymbolsContentCopyOutline from '../icones/MaterialSymbolsContentCopyOutline.svelte';
      at TransformPluginContext._formatError (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49255:41)
      at TransformPluginContext.error (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49250:16)
      at normalizeUrl (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64041:23)
      at async file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64173:39
      at async Promise.all (index 2)
      at async TransformPluginContext.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64100:7)
      at async PluginContainer.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49096:18)
      at async loadAndTransform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:51929:27)
      at async viteTransformMiddleware (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:61881:24)
11:38:23 AM [vite] Internal server error: Failed to resolve import "$lib/components/ui/dropdown-menu" from "src/lib/datagrid/shadcn/options-menu.svelte". Does the file exist?
  Plugin: vite:import-analysis
  File: /.../repo/src/lib/datagrid/shadcn/options-menu.svelte:2:31
  5  |
  6  |  import * as $ from "svelte/internal/client";
  7  |  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
     |                                 ^
  8  |  import { getContext } from 'svelte';
  9  |  import { updateColumnWidth } from '../fns/update-column-width';
      at TransformPluginContext._formatError (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49255:41)
      at TransformPluginContext.error (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49250:16)
      at normalizeUrl (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64041:23)
      at async file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64173:39
      at async Promise.all (index 2)
      at async TransformPluginContext.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:64100:7)
      at async PluginContainer.transform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:49096:18)
      at async loadAndTransform (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:51929:27)
      at async viteTransformMiddleware (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:61881:24)
11:38:23 AM [vite] Pre-transform error: Failed to resolve import "fast-xml-parser" from "src/lib/datagrid/fns/export-to-xml.ts". Does the file exist?
11:38:24 AM [vite] ✨ new dependencies optimized: fast-sort, clsx, tailwind-merge, papaparse, xlsx
11:38:24 AM [vite] ✨ optimized dependencies changed. reloading
11:38:24 AM [vite-plugin-svelte] src/routes/song/[slug]/+page.svelte:33:7 State referenced in its own scope will never update. Did you mean to reference it inside a closure?
11:38:24 AM [vite] Pre-transform error: Failed to load url bits-ui (resolved id: bits-ui) in /.../repo/src/lib/datagrid/shadcn/pagination.svelte. Does the file exist?
11:38:24 AM [vite] Pre-transform error: Failed to load url $lib/components/ui/select (resolved id: /.../repo/src/lib/components/ui/select) in /.../repo/src/lib/datagrid/shadcn/pagination.svelte. Does the file exist?
11:38:24 AM [vite] Pre-transform error: Failed to load url $lib/components/ui/input/input.svelte (resolved id: /.../repo/src/lib/components/ui/input/input.svelte) in /.../repo/src/lib/datagrid/shadcn/pagination.svelte. Does the file exist?
11:38:24 AM [vite] Pre-transform error: Failed to load url $lib/components/ui/button/button.svelte (resolved id: /.../repo/src/lib/components/ui/button/button.svelte) in /.../repo/src/lib/datagrid/shadcn/show-head-filters-toggler.svelte. Does the file exist?
11:38:24 AM [vite] Pre-transform error: Failed to load url $lib/components/ui/button/button.svelte (resolved id: /.../repo/src/lib/components/ui/button/button.svelte) in /.../repo/src/lib/datagrid/shadcn/show-head-filters-toggler.svelte. Does the file exist? (x2)
11:38:24 AM [vite] Pre-transform error: Failed to load url $lib/components/ui/button/button.svelte (resolved id: /.../repo/src/lib/components/ui/button/button.svelte) in /.../repo/src/lib/datagrid/shadcn/show-head-filters-toggler.svelte. Does the file exist? (x3)
11:38:24 AM [vite] Pre-transform error: Failed to load url $lib/components/ui/button/button.svelte (resolved id: /.../repo/src/lib/components/ui/button/button.svelte) in /.../repo/src/lib/datagrid/shadcn/show-head-filters-toggler.svelte. Does the file exist? (x4)
11:38:24 AM [vite] Pre-transform error: Failed to load url $lib/components/ui/button/button.svelte (resolved id: /.../repo/src/lib/components/ui/button/button.svelte) in /.../repo/src/lib/datagrid/shadcn/show-head-filters-toggler.svelte. Does the file exist? (x5)
11:38:24 AM [vite] Pre-transform error: Failed to load url $lib/components/ui/dropdown-menu (resolved id: /.../repo/src/lib/components/ui/dropdown-menu) in /.../repo/src/lib/datagrid/shadcn/copy-to-clipboard-menu.svelte. Does the file exist?
11:38:24 AM [vite] Pre-transform error: Failed to load url $lib/components/ui/dropdown-menu (resolved id: /.../repo/src/lib/components/ui/dropdown-menu) in /.../repo/src/lib/datagrid/shadcn/copy-to-clipboard-menu.svelte. Does the file exist? (x2)
11:38:24 AM [vite] Pre-transform error: Failed to load url $lib/components/ui/dropdown-menu (resolved id: /.../repo/src/lib/components/ui/dropdown-menu) in /.../repo/src/lib/datagrid/shadcn/copy-to-clipboard-menu.svelte. Does the file exist? (x3)
11:38:24 AM [vite] Pre-transform error: Failed to load url fast-xml-parser (resolved id: fast-xml-parser) in /.../repo/src/lib/datagrid/fns/export-to-xml.ts. Does the file exist?
11:38:24 AM [vite] Error when evaluating SSR module /src/lib/datagrid/shadcn/pagination.svelte: failed to import "$lib/components/ui/select"
|- Error: Cannot find module '$lib/components/ui/select' imported from '/.../repo/src/lib/datagrid/shadcn/pagination.svelte'
    at nodeImport (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53047:19)
    at ssrImport (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:22)
    at eval (/.../repo/src/lib/datagrid/shadcn/pagination.svelte:4:37)
    at async instantiateModule (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)

11:38:24 AM [vite] Error when evaluating SSR module /src/lib/datagrid/datagrid-pagination.svelte: failed to import "$lib/components/ui/select"
|- Error: Cannot find module '$lib/components/ui/select' imported from '/.../repo/src/lib/datagrid/shadcn/pagination.svelte'
    at nodeImport (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53047:19)
    at ssrImport (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:22)
    at eval (/.../repo/src/lib/datagrid/shadcn/pagination.svelte:4:37)
    at async instantiateModule (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)

11:38:24 AM [vite] Error when evaluating SSR module /src/lib/datagrid/datagrid.svelte: failed to import "$lib/components/ui/select"
|- Error: Cannot find module '$lib/components/ui/select' imported from '/.../repo/src/lib/datagrid/shadcn/pagination.svelte'
    at nodeImport (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53047:19)
    at ssrImport (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:22)
    at eval (/.../repo/src/lib/datagrid/shadcn/pagination.svelte:4:37)
    at async instantiateModule (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)

11:38:24 AM [vite] Error when evaluating SSR module /src/routes/song/[slug]/+page.svelte: failed to import "$lib/components/ui/select"
|- Error: Cannot find module '$lib/components/ui/select' imported from '/.../repo/src/lib/datagrid/shadcn/pagination.svelte'
    at nodeImport (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53047:19)
    at ssrImport (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:22)
    at eval (/.../repo/src/lib/datagrid/shadcn/pagination.svelte:4:37)
    at async instantiateModule (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5)

Error: Cannot find module '$lib/components/ui/select' imported from '/.../repo/src/lib/datagrid/shadcn/pagination.svelte'
    at nodeImport (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53047:19)
    at ssrImport (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52914:22)
    at eval (/.../repo/src/lib/datagrid/shadcn/pagination.svelte:4:37)
    at async instantiateModule (file:///.../repo/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:52972:5) {
  code: 'ERR_MODULE_NOT_FOUND'
}

tzezar commented 1 week ago

Hey @alxndr! In the current version (beta) you need to have shadcn-svelte installed first. As it is written in the documentation:

“As of today, datagrid uses components offered by shadcn-svelte. In the future there will be a native and headless version. So, I assume you have shadcn-svelte installed. If not here is how to do it. You do not need to install allcomponents, only dropdown menu, select, button and optionally context menu, popover are used.”

Your suggestion to add the option with installing all deps including shadcn-svelte is a very good idea. However, in the coming days there will be an official V1 version of datagrid with a lot of improvements, new features, new api, a selection of styling options, and most importantly, a fully headless version. Therefore, it will not be introduced now.

To answer your second question: yes, app.css refers to the global file with styling and applied tailwind @layers

The beta version tightly connects the component to the datagrid logic, which was completely changed in the official v1 release. There will be several options to choose from, There will be available as I mentioned the main part of the datagrid in the headless version similar to @tanstack-table. So anyone needing only internal logic will be like at home. In addition, on the basis of this headless logic will be built ready-to-use and easy to customize components also based on shadcn-svelte. I realize that not everyone likes tailwind, so I would also like to prepare a version built and styled without shadcn-svelte and tailwind.

TLDR: hold off on implementation for a few days. Upcoming official release will have a stable core API, more features, long term support.

alxndr commented 1 week ago

Sounds good @tzezar, thank you! Looking forward to v1!

tzezar / datagrid

install issues #18