retejs / code-plugin

7 stars 7 forks source link

Convert component names to camelCase #2

Closed Ni55aN closed 5 years ago

Ni55aN commented 5 years ago

fixed in v0.1.1

JMidd91 commented 5 years ago

Hi,

Just thought id give this plugin a go again see how i got on.

i am getting this error - image

its coming from this component if its something I have done, not sure really!


    class NumComponent extends Rete.Component {

        constructor() {
            super("Number");
            this.allocation = ['Math'];
            this.task = {
                outputs: {num: "output" }
            }
        }

        builder(node) {
            var out1 = new Rete.Output('num', "Number", numSocket);
            var ctrl = new TextControl(this.editor, 'num', false, 'number');

            return node.addControl(ctrl).addOutput(out1);
        }

        worker(node, inputs, outputs) {
            return {num: node.data.num};
        }

        code(node, inputs, add){
            console.log("add - \nnode", node, "\ninputs", inputs, "\nadd", add);
            add('num', node.data.num);
        }
    }
Ni55aN commented 5 years ago

@trsh how do you building your app? I guess you haven't added the case dependency, if you add all dependences via <script>

JMidd91 commented 5 years ago

ok so yea i did wonder that, I havnt done a search for case.js or what ever it would be. will do that now.

if you have a link to where i can find case i would appreciate it! :)

EDIT: is this it? -https://www.npmjs.com/package/case

trsh commented 5 years ago

@Ni55aN no idea what are u talking about

JMidd91 commented 5 years ago

its interesting, I added case.js to my project and now i get an error pointing to editor.use(AlightRenderPlugin);

image

do you think the error is related?

EDIT1: so if i remove case.js or editor.use(AlightRenderPlugin); from my project i get rid of the error.

i know editor.use(AlightRenderPlugin); is deprecated, but I thought I could still use it?

EDIT2: ok so im just talking out loud here, so please tell me if i am talking rubbish -

when I use case.js, it causes the error with alight render plugin at this line - https://github.com/retejs/alight-render-plugin/blob/b436fc83c2e09ad82f8f9bb454acf11f6734d0f3/src/index.js#L11

when I remove case.js and console log out alight of the above line, it no longer comes back as undefined and i dont get the error.

so am i right in thinking something in either case.js or code plugin is blocking the alight var being populated?

EDIT3: ok so i moved the script tag for case.js and moved it below rete.min.js and below alight.min.js and this fixed the issue.

I dont think Case uses alight but I guess it must be to do with some sort of loading order?

getting the camel undefined error with this now. really confused. its prob a case of late in the week, brain is dead haha

Ni55aN commented 5 years ago

Now you need to include Angular light script. I propose you use build tools (webpack, parcel, rollup) to get rid of headaches when including dependencies.

JMidd91 commented 5 years ago

Now you need to include Angular light script.

alight.min.js is this not what you speak of? as I already include it, it is loaded after rete.min.js but before alight-render-plugin

Ni55aN commented 5 years ago

that's exactly what I'm talking about

Ni55aN commented 5 years ago

Place it before rete.js

JMidd91 commented 5 years ago

hmm doesnt seem to fix the issue

Ni55aN commented 5 years ago

How do you build your app?

JMidd91 commented 5 years ago

old fashioned way. I dont use npm etc to build it.

JMidd91 commented 5 years ago

I think Case.js isnt included correctly because if i try to search / invoke anything to do it via console it is undefined or unexpected token. unless i am missunderstanding the docs for case

image;

its definitely there though - image

Ni55aN commented 5 years ago

old fashioned way. I dont use npm etc to build it.

Stop doing it :)

JMidd91 commented 5 years ago

Stop doing it :)

I know but i am in too deep to convert!

Ni55aN commented 5 years ago

The further, the harder it will be.

Case.min.js should have a global Case. It seems that script does not have it. What's inside? Did you take it from the CDN?

JMidd91 commented 5 years ago

yea from the CDN.

yea so thats what I have found out. it doesnt expose Case for some reason. trying to find the best way to expose its Case variable in the correct way without taking it out of its function, otherwise id have to rename its _ variable as I am using lodash which would collide

Ni55aN commented 5 years ago

Just migrate to Webpack :1st_place_medal:

JMidd91 commented 5 years ago

maybe one day when I get bored 🤣 I fixed it for now by removing it from an anonymous function and renaming the _ variable... dirty but will make it better later haha. thanks for your assistance 👍