Help needed to setup properly in my test environment #358

Koepisch · 2023-03-04T14:23:40Z

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>

The text was updated successfully, but these errors were encountered:

yuku · 2023-03-06T00:51:29Z

<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 Distributable JS file #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 · 2023-03-06T07:25:22Z

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

yuku added the question label Mar 6, 2023

yuku closed this as completed Mar 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Help needed to setup properly in my test environment #358

Help needed to setup properly in my test environment #358

Koepisch commented Mar 4, 2023 •

edited

Loading

yuku commented Mar 6, 2023 •

edited

Loading

Koepisch commented Mar 6, 2023

Help needed to setup properly in my test environment #358

Help needed to setup properly in my test environment #358

Comments

Koepisch commented Mar 4, 2023 • edited Loading

yuku commented Mar 6, 2023 • edited Loading

Koepisch commented Mar 6, 2023

Koepisch commented Mar 4, 2023 •

edited

Loading

yuku commented Mar 6, 2023 •

edited

Loading