install a svelte-kit package from git

[milahu]

Describe the problem

when creating packages with svelte-kit https://kit.svelte.dev/docs#packaging

how is this supposed to work, when i install the package from git?

for example: svelte-jsoneditor

npm install https://github.com/josdejong/svelte-jsoneditor

usually i use the "prepare" script in package.json, to build such a library

{
  "scripts": {
    "prepare": "npm run build",
    "build": "..."
  }
}

but when the build is written to node_modules/pname/package/package.json
then obviously i cannot import it via node_modules/pname/package.json

Describe the proposed solution

naive solution: in svelte.config.js set kit.package.dir = "."
but this will delete the project root folder, including .git

workaround:

in svelte.config.js set kit.package.dir = "package"

package.json

{
  "scripts": {
    "prepare": "node svelte.prepare.mjs",
    "build": "..."
  }
}

svelte.prepare.mjs

import fs from 'fs';
import child_process from 'child_process';



const buildCommand = 'npm run build';
const svelteConfigPath = './svelte.config.js';
let pkgdir = 'package'; // default value
const ignoreFiles = ['.git'];



async function svelteKitPrepare() {

  console.log(buildCommand);
  child_process.execSync(buildCommand, { stdio: 'inherit', windowsHide: true });

  const srcdir = fs.mkdtempSync('src-of-svelte-kit-');
  ignoreFiles.push(srcdir);

  console.log(`move all files to ${srcdir}, except ${ignoreFiles.join(' ')}`);
  const ignoreFilesSet = new Set(ignoreFiles);
  for (const filename of fs.readdirSync('.')) {
    if (ignoreFilesSet.has(filename)) {
      console.log(`ignore ${filename}`);
      continue;
    }
    console.log(`mv -t ${srcdir}/ ${filename}`);
    fs.renameSync(filename, `${srcdir}/${filename}`);
  }

  // get custom pkgdir
  if (fs.existsSync(svelteConfigPath)) {
    console.log(`import ${svelteConfigPath}`)
    const svelteConfig = await import(svelteConfigPath);
    if (svelteConfig.kit?.package?.dir) {
      pkgdir = svelteConfig.kit.package.dir; // custom value
    }
  }

  // move package files back
  for (const filename of fs.readdirSync(`${srcdir}/${pkgdir}`)) {
    console.log(`mv -t ./ ${filename}`);
    fs.renameSync(`${srcdir}/${pkgdir}/${filename}`, filename);
  }

  console.log(`rmdir ${srcdir}/${pkgdir}`)
  fs.rmdirSync(`${srcdir}/${pkgdir}`); // pkgdir should be empty
}



svelteKitPrepare();

old version: svelte.prepare.sh

#!/bin/sh

pkgdir=package # svelte.config.js: kit.package.dir
srcdir=.src

set -e # throw on error
set -o xtrace # print commands

if [ -d "$srcdir" ]
then
  if ! (rmdir "$srcdir") # remove empty srcdir
  then
    echo "error: srcdir $srcdir is not empty"
    exit 1
  fi
fi

mkdir "$srcdir"

npm run build

# move all files except $srcdir and .git
find . -mindepth 1 -maxdepth 1 '(' -not -name "$srcdir" -and -not -name .git ')' -exec mv -t "$srcdir" '{}' ';'

# move package files back
find "$srcdir/$pkgdir" -mindepth 1 -maxdepth 1 -exec mv -t ./ '{}' ';'

rmdir "$srcdir/$pkgdir"

Alternatives considered

No response

Importance

i cannot use SvelteKit without it

(no seriously, "install from git" is a standard feature of npm)

Additional Information

No response

[Rich-Harris]

I have a hunch that the solution to this will overlap with #2242, though I don't have a clear idea off the top of my head what the best answer is

[Rich-Harris]

closed accidentally

[milahu]

overlap with #2242

not really ...

here: fix the production environment for "install from git"
the library should be javascript and d.ts files, just like "install from npm"
import/require should "just work" (package.json should point to correct paths)

there: fix the development environment, work with typescript files
may be useful for deno / ts-node, to run typescript directly
may be useful to add dependencies as typescript in src/ (not in node_modules/),
and compile project and dependencies together (im not sure how useful that is)

[dummdidumm]

Can this be solved already by creating a manual exports map in the package.json of the project?

"exports": { ".": "./package/index.js", ..}

[milahu]

i still think its easier to emulate npm publish package/ by moving ./package/* to ./
because then i have the exact same folder layout as with "install from npm"
and im not fighting npm (see below)
example https://github.com/milahu/svelte-jsoneditor/tree/fix-install-from-git-2

alternative solution:
it kind-of works when i patch node_modules/svelte-jsoneditor/package.json from

  "svelte": "index.js",
  "module": "dist/jsoneditor.js",
  "main": "dist/jsoneditor.js",

to

  "svelte": "package/index.js",
  "module": "package/dist/jsoneditor.js",
  "main": "package/dist/jsoneditor.js",

by running this after npm run build

#! /usr/bin/env node

import fs from 'fs'

const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'))

for (const key of ['svelte', 'module', 'main']) {
  if (!pkg[key]) continue
  // workaround: avoid double-patching
  // FIXME why is this script called twice
  if (pkg[key].startsWith('package/')) continue
  pkg[key] = 'package/' + pkg[key]
}

fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2) + '\n', 'utf8')

example https://github.com/milahu/svelte-jsoneditor/tree/fix-install-from-git-3

problem is, npm is deleting the generated files in package/dist/
and i still have no idea why exactly ...
npm --loglevel silly did not help
also when i add "files": "*" to package.json
.gitignore is not included in the github tarball
to compare, pnpm is keeping all generated files

i also tried

  "exports": { ".": "package/index.js" },

and

  "exports": { "./*": "package/*" },

... but then npm is deleting the generated files in package/

in svelte-jsoneditor, the module field is needed by the rollup config

reproduce

cd $(mktemp -d)
git clone --depth 1 https://github.com/sveltejs/template/ svelte-project
cd svelte-project
npm install

cat >src/App.svelte <<'EOF'
<script>
  import { JSONEditor } from 'svelte-jsoneditor'
  let content = {
    text: undefined, // used when in code mode
    json: { array: [1, 2, 3] }
  }
</script>
<div>
  <JSONEditor bind:content />
</div>
EOF

# fix rollup: [!] Error: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.
sed -i "s|format: 'iife',|//&|" rollup.config.js
sed -i "s|file: 'public/build/bundle.js'|dir: 'public/build'|" rollup.config.js
sed -i "s|/bundle.js'|/main.js' type='module'|" public/index.html

npm add -D https://github.com/josdejong/svelte-jsoneditor
npm run dev
# Error: Could not load node_modules/svelte-jsoneditor/index.js (imported by src/App.svelte): ENOENT: no such file or directory
# problem: `build` script was not run in `prepare`

# install from git: run `build` in `prepare`
# note: with npm, build takes about four minutes, also because of typescript typechecking
# svelte-kit: 20 seconds
# rollup: 80 seconds - with esbuild: 40 seconds

# version 2: move ./package/* files to ./
npm rm svelte-jsoneditor # force re-install
npm add -D https://github.com/milahu/svelte-jsoneditor#fix-install-from-git-2
npm run dev

# version 3: patch paths in package.json
npm rm svelte-jsoneditor # force re-install
npm add -D https://github.com/milahu/svelte-jsoneditor#fix-install-from-git-3
npm run dev

[ghostdevv]

I think this may have been solved by #8922