Help needed to setup properly in my test environment

Koepisch commented 1 year ago

That's not an issue - it's a help request.

I'm a beginner in web development and make my first steps. My problem is, that i can't get the demo code running using the following setup:

Visual Studio Code with Live Server installed (tried with different browsers)
npm install @textcomplete/core and @textcomplete/textarea
My own single HTML file with utilizing textarea

I cant use "require" or "import" in this environment. I can only use the <Script src .." tag to import the module. The Problem is that "TextareaEditor" isn't properly referenced (Test.html:53 Uncaught ReferenceError: TextareaEditor is not defined at Test.html:53:23)

Please can anybody make a single HTML File which works? Or throw me a few keywords, that i can grasp what the solution is?

<html>
    <head>Test TextComplete</head>
    <body>
        <textarea name="TE1_Name" id="TE1_ID" cols="100" rows="10">
        </textarea>
    </body>

    <script type="text/typescript" src="../node_modules/@textcomplete/core/src/Textcomplete.ts"></script>
    <script type="text/typescript" src="../node_modules/@textcomplete/textarea/src/TextareaEditor.ts"></script>   

    <script>            
        var textareaElement = document.getElementById('TE1_ID');
        var  editor = new TextareaEditor(textareaElement);

        var textcomplete = new Textcomplete(editor, {
        dropdown: {
            maxCount: Infinity
        }
        })

        textcomplete.register([{
            // Emoji strategy
            match: /(^|\s):(\w+)$/, // https://regex101.com/r/Z0Vbfe/1
            search: function (term, callback) {
                callback(emojies.filter(emoji => { return emoji.startsWith(term); }));
            },
            replace: function (value) {
                return '$1:' + value + ': ';
            }
        }]);
    </script>
</html>

yuku commented 1 year ago

<script type="text/typescript" src="../node_modules/@textcomplete/core/src/Textcomplete.ts"></script>

You are attempting to load typescript directly from browser but it is not possible. To fix this issue, I think there are two solutions here:

bundle distributed javascript files by yourself using tools such as parcel, webpack and rollup, then load it.
make the textcomplete package ship with such bundled file and use it via CDN (as #357 requests)
- when I put myself in your place, it is easier. But sorry, I don't have time to do that right now.

By the way, if you want to run the demo code locally, there is much easier way to do so: run the demo directly.

git clone https://github.com/yuku/textcomplete.git
cd textcomplete
npm install
npm run lerna bootstrap
npm docs

hope this helps.

Koepisch commented 1 year ago

Thanks a lot Yuku, That give me some good hints. I will try my best.

yuku / textcomplete

Help needed to setup properly in my test environment #358