Add to CDN - Githubissues

KoalaBear84 commented 1 year ago

Hi Jos,

Thanks for your answer for pointing me to the successor. I would like it to be added to cdnjs.com, but I don't know what to put at the "Files to include", many times there is a "dist" folder with the files that are build, but this time I have no clue what files to include.

If you use this link, everything else will be filled in already.

https://github.com/cdnjs/packages/issues/new?assignees=&labels=%F0%9F%8F%B7+Library+Request&projects=&template=library-request.yml&title=Add%3A+svelte-jsoneditor&name=svelte-jsoneditor&license=https%3A%2F%2Fgithub.com%2Fjosdejong%2Fsvelte-jsoneditor%2Fblob%2Fmain%2FLICENSE.md&source=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fsvelte-jsoneditor

Could you take a look? You can also create it yourself, otherwise I'll submit it after I know which files.

Thanks!

josdejong commented 1 year ago

You can use for example jsdelivr:

https://www.jsdelivr.com/package/npm/svelte-jsoneditor https://www.jsdelivr.com/package/npm/vanilla-jsoneditor

Is that sufficient?

KoalaBear84 commented 1 year ago

Maybe.. if I know how it can work on the regular web 😅

https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm

I think the umd thing should work on the regular web? But not sure if that is possible.

Uncaught SyntaxError: Cannot use import statement outside a module (at index.min.js:7:1)

Yes, I don't have any experience with all the module like techniques, only real plain JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Editor</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/svelte-jsoneditor@0.17.7/index.min.js"></script>
</body>
</html>

Also tried:

<script type="module" src="https://cdn.jsdelivr.net/npm/svelte-jsoneditor@0.17.7/index.min.js"></script>

But got: Uncaught TypeError: Failed to resolve module specifier "immutable-json-patch". Relative references must start with either "/", "./", or "../".

--

After that I tried the vanilla-jsoneditor, which I guess I should've tried the first time, but also have issues with that.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Editor</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vanilla-jsoneditor@0.17.7/index.min.js"></script>
</body>
</html>

Error: Uncaught SyntaxError: Unexpected token 'export' (at index.min.js:32:18675)

And tried with type=module:

<script type="module" src="https://cdn.jsdelivr.net/npm/vanilla-jsoneditor@0.17.7/index.min.js"></script>

But getting: Uncaught ReferenceError: JSONEditor is not defined

And this one:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Editor</title>
</head>

<body>
    <div id="jsoneditor"></div>

    <script type="module">
        import { JSONEditor } from 'https://cdn.jsdelivr.net/npm/vanilla-jsoneditor@0.17.7/index.min.js';

        const options = {
            mode: 'tree',
            modes: ['code', 'text', 'tree', 'preview']
        };

        const editor = new JSONEditor(document.querySelector('#jsoneditor'), options);
    </script>
</body>

</html>

Results in:

_lazyValue.js:10  Uncaught TypeError: Cannot read properties of undefined (reading '$$')
    at Ia (_lazyValue.js:10:22)
    at new n (jmespathQueryLanguage.ts:132:1)
    at jsoneditor.html:22:24

josdejong commented 1 year ago

The editor has a different API then the predecessor (jsoneditor) please read the docs.

Here an example: https://jsbin.com/yuwapaj/edit?html,output

josdejong / svelte-jsoneditor

Add to CDN #285