How to modify sveltejs-froms package locally for my own use?

Question

I am new to the world of sveltejs, the front end world. I have a project using the package sveltejs-forms, and use the REPL sveltejs-form demo as the start point. For some reason, I can not use the latest version of sveltejs-forms, but I would like to customize some code for my own use, such as set the default selected option.

Here is the part of package.json of my project

"devDependencies": {

    "svelte": "3.20.0",
    "sveltejs-forms": "1.0.0",

    "yup": "0.16.4"
}

In the REPL demo code, for the purpose of setting default selected option, I would like to change the code from

const langOptions = [
    { id: 'svelte', title: 'Svelte' },
    { id: 'react', title: 'React' },
    { id: 'angular', title: 'Angular' },
];

to

const langOptions = [
    { id: 'svelte', title: 'Svelte', default: true },
    { id: 'react', title: 'React' },
    { id: 'angular', title: 'Angular' },
];

so I've download the code sveltejs-forms 1.0.0 from github, and extracted it locally as below:

And want to change the demo code from

<script>
  import { Form, Input, Select, Choice } from 'sveltejs-forms';

to

<script>
  import { Form, Input, Select, Choice } from './my-local-sveltejs-forms.svelte';

How can I do?

I have google for 'modify sveltejs package locally', but nothing found. And google "how to create package for sveltejs", and read the article Creating a package for Svelte for hint (but not yet dive in), and watch the youtube How to create a web component in sveltejs, and Svelte - Make web components!

Does there have any documents for how to create the package for Svelte? Or do you experts have any suggestion? Or just go the the github repo to have an issue?

score 2 · Accepted Answer · answered Aug 09 '20 at 14:08

2

I think you have at least two different ways to go. First way is to change the ”svelte-forms” in the package.json to point local files.

”svelte-forms” : ”file: ../../svelte-form”

Search more info: ”npm local dependency”

After you change the local files, you must run:

yarn upgrade svelte-forms

Second way to go is what you are trying to do ie. add files straight to your project, for ex. Into some subfolder. The challenge here is to change all imports to point in the correct folders. If there is only a few components/files, this shouldn’t be a problem.

You can also remove related dependency from package.json. And I think you should remove it, because it could cause some problems if the files are found multiple paths.

answered Aug 09 '20 at 14:08

grohjy

2,059
1
18
19

I follow your suggestion and search npm local dependency, and found [how to specify local modules as npm package dependencies](https://stackoverflow.com/q/15806241/3309645), then I use this command to install the local module `npm install --save ../../sveltejs-forms-1.0.0`, BINGO! I can use the local customized module. Thank you very much, you save my day life. – charles.cc.hsu Aug 10 '20 at 05:41
Glad I could help! Here are some important information about updating your changes in local files (Basically you should use `npm install name_of_local_dependency`): https://stackoverflow.com/questions/32873867/update-local-file-dependency-with-npm/32874157#32874157 – grohjy Aug 10 '20 at 06:18

How to modify sveltejs-froms package locally for my own use?

1 Answers1