publishing a svelte 3 component: semantics for "main" and "svelte" fields of package.json?

Question

I took the Svelte tutorial and rewrote the keypad in the component bindings section with a state machine. That worked lovely.

Now I want to extract the Machine.svelte file into a npm package and I am not sure how to do that. I could not find any documentation about publishing. For what I saw from svelte-virtual-list, I probably have to configure either the main or svelte field of my package.json:

{
  "name": "@sveltejs/svelte-virtual-list",
  "version": "3.0.0",
  "description": "A <VirtualList> component for Svelte apps",
  "main": "VirtualList.svelte",
  "svelte": "VirtualList.svelte",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -cw",
    "prepublishOnly": "npm test",
    "test": "node test/runner.js",
    "test:browser": "npm run build && serve test/public",
    "pretest": "npm run build",
    "lint": "eslint src/VirtualList.svelte"
  },
  "devDependencies": {
    "eslint": "^5.12.1",
    "eslint-plugin-svelte3": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git",
    "port-authority": "^1.0.5",
    "puppeteer": "^1.9.0",
    "rollup": "^1.1.2",
    "rollup-plugin-commonjs": "^9.2.0",
    "rollup-plugin-node-resolve": "^4.0.0",
    "rollup-plugin-svelte": "^5.0.1",
    "sirv": "^0.2.2",
    "svelte": "^3.0.0-beta.2",
    "tap-diff": "^0.1.1",
    "tap-dot": "^2.0.0",
    "tape-modern": "^1.1.1"
  },
  "repository": "https://github.com/sveltejs/svelte-virtual-list",
  "author": "Rich Harris",
  "license": "LIL",
  "keywords": [
    "svelte"
  ],
  "files": [
    "src",
    "index.mjs",
    "index.js"
  ]
}

Is that a correct assumption? Additionally I am perplexed by the fact that in the package.json.files the VirtualList.svelte is not present? How would you go about publishing a svelte component??

EDIT: final gist correctly importing the Machine Svelte component

Answer 1

The svelte field is used by rollup-plugin-svelte and (if properly configured) svelte-loader to locate the source file, so that your third party components get compiled at the same time as the rest of your app (and import from the same internal library).

In a case like svelte-virtual-list, where you can't really use it programmatically from JavaScript (i.e. it has to be inside another component), there's really no point having a main field as well; that's something left over from a previous version I think.

But in some cases you do want non-Svelte-users to be able to use your component as a standalone class, and that's when main is useful, as long as it points to a precompiled JavaScript file. This could be generated with rollup-plugin-svelte during a prepublish script (though we could do a better job of generating some standard workflows around this). For maximum compatibility, a component — or package of components — intended to be used in this way should have a pkg.main (usually index.js which is a CommonJS or UMD file), and a pkg.module (usually index.mjs which is a JavaScript module).

Additionally I am perplexed by the fact that in the package.json.files the VirtualList.svelte is not present?

Regardless of what's in pkg.files, pkg.main will always be included. Since there's an erroneous pkg.main in svelte-virtual-list, the VirtualList.svelte file is included in the package even though I forgot to add it to pkg.files.