functionList for ExtJS framework (Sencha)

[webpuper]

Hello!

I am trying to create a custom parser in “functionList” for ExtJS framework (Sencha)

In particular, you need to define the classes:

Ext.define (‘NameClass’, {…});

How do I get the NameClass names?
How do I write a regular expression?

I ask for help.

[PeterJones]

@webpuper

I am trying to create a custom parser in “functionList”

You might want to look at the recent discussion here for a lot of back and forth about functionList

See the references in the online user manual:

• https://npp-user-manual.org/docs/config-files/#function-list
• https://npp-user-manual.org/docs/function-list/#how-to-customize-function-list

See the “Function List Basics” FAQ in this forum

• https://community.notepad-plus-plus.org/topic/19480/faq-desk-function-list-basics

How do I write a regular expression?

See the

• Regular Expression section in User Manual: https://npp-user-manual.org/docs/searching/#regular-expressions
• Regular Expression FAQ: https://community.notepad-plus-plus.org/topic/15765/faq-desk-where-to-find-regular-expressions-regex-documentation

for ExtJS framework

Based on the name, I am going to assume that ExtJS is similar to JavaScript. You might want to just start by copying the javascript.js.xml for your user-defined language; that might get you most of the way there.

[webpuper]

@peterjones said in functionList for ExtJS framework (Sencha):

Based on the name, I am going to assume that ExtJS is similar to JavaScript. You might want to just start by copying the javascript.js.xml for your user-defined language; that might get you most of the way there.

This is what I am trying to do.

<function
    mainExpr="((^|\s+|[;\}\.])([A-Za-z_$][\w$]*\.)*[A-Za-z_$][\w$]*\s*[=:]|^|[\s;\}]+)\s*Ext.define\s*(\'\s+[A-Za-z_$][\w$]*)?\s*\([^\)\(]*\)[\n\s]*\'"
>
    <functionName>
        <nameExpr expr="[A-Za-z_$][\w$]*\s*[=:]|[A-Za-z_$][\w$]*\s*\(" />
        <nameExpr expr="[A-Za-z_$][\w$]*" />
    </functionName>
    <className>
        <nameExpr expr="([A-Za-z_$][\w$]*\.)*[A-Za-z_$][\w$]*\." />
        <nameExpr expr="([A-Za-z_$][\w$]*\.)*[A-Za-z_$][\w$]*" />
    </className>
</function>

Somewhere I’m wrong

[PeterJones]

@webpuper ,

Somewhere I’m wrong

Classes only show up in FunctionList if there is a function inside that class. That means that your <className> element must have a <function> and <functionName> inside. The outline of your parser should be as follows. (Note that I am not showing any of the attributes or values… this is just the rough outline.)

<NotepadPlus>
    <functionList>
        <parser...>
            <classRange>
                <className>
                    <nameExpr .../>
                    <nameExpr .../>
                </className>
                <function>
                    <functionName>
                        <funcNameExpr .../>
                    </functionName>
                </function>
            </classRange>
            <function>
                <functionName>
                    <nameExpr.../>
                </functionName>
            </function>
        </parser>
    </functionList>
</NotepadPlus>

Also, unless you provide us with some example ExtJS text, it is quite difficult for us to be able to help you with your expressions, even after your XML structure was correct.

[webpuper]

@peterjones said in functionList for ExtJS framework (Sencha):

Also, unless you provide us with some example ExtJS text, it is quite difficult for us to be able to help you with your expressions, even after your XML structure was correct.

I would greatly appreciate your help as first encountered Notepad ++ and then would like to understand it and implement it in our projects.

Example:

Ext.define('ClassName', {
    extend: 'Ext.data.TreeStore',
    storeId: 'NavigationTree',
MyFunc1: function() { },
MyFunc2: function() { }
});

You need to define NameClass and class methods MyFunc1 and MyFunc2

[PeterJones]

@webpuper ,

So, the first thing I do is simplify to absolute bare minimum: I create dummy UDL with name ExtJS. Create functionList\extjs.xml. Edit overrideMap to include

			<association id= "extjs.xml"	        userDefinedLangName="ExtJS"/>

My dummy extjs.xml starts super simple – no class, no names, just looking for the word function:

<?xml version="1.0" encoding="UTF-8" ?>
<!-- ==========================================================================\
|
|   To learn how to make your own language parser, please check the following
|   link:
|       https://npp-user-manual.org/docs/function-list/
|
\=========================================================================== -->
<NotepadPlus>
    <functionList>
        <parser
            displayName="ExtJS"
            id="ExtJS"
            commentExpr=""
        >
			<function
				mainExpr="function"
			>
				<functionName>
					<nameExpr expr="function"
					/>
				</functionName>
			</function>
        </parser>
    </functionList>
</NotepadPlus>

I make sure that shows a couple of functions in your dummy data. (This step is primarily to make sure I’ve got all the “overhead” correct – UDL defined, overrideMap correct, and using a simple regex of plain text to make sure I have no regex mistakes.) Only after this is working do I try to move forward.

Then I make it a little more complicated to actually require “something colon spaces function” using (?x-s)^\h*.*?:\h*function for both of the expressions

Then I change the : function part in the nameExpr to a lookahead so it doesn’t show up in the name, so now I’m up to:

			<function
				mainExpr="(?x-s)^\h*.*?:\h*function"
			>
				<functionName>
					<nameExpr expr="(?x-s)^\h*.*?(?=:\h*function)"
					/>
				</functionName>
			</function>

Next, I want to define a class range. Before I do this, I add a fake/invalid function outside your class, so I can make sure it can tell the difference:

Ext.define('ClassName', {
    extend: 'Ext.data.TreeStore',
    storeId: 'NavigationTree',
MyFunc1: function() { },
MyFunc2: function() { }
});

FakeOutsideFunc: function() { }

Then I add a <classRange> that’s trying to find from Ext.define through }); (I didn’t want to have to check for balanced {}, so I just assume that only classes will end with }); for this simple example): (?xs)Ext\.define.*?}\); . I then copy the expressions from the normal function into the right element attributes at the class level.

            <classRange
                mainExpr="(?xs)Ext\.define.*?}\);"
            >
                <function
                    mainExpr="(?x-s)^\h*.*?:\h*function"
                >
                    <functionName>
                        <funcNameExpr  expr="(?x-s)^\h*.*?(?=:\h*function)"
                        />
                    </functionName>
                </function>
            </classRange>

At this point, it can find the functions both inside and outside the class definition; and if I mess up the expressions, I can prove I am finding the ones inside vs the ones outside.

Finally, I add the <className> and <nameExpr> elements inside the <classRange>, and play with the expression until I extract just the part inside the quotes to show as the name of the class.

Put it all together, and I see

using the functionList\extjs.xml file of:

<?xml version="1.0" encoding="UTF-8" ?>
<!-- ==========================================================================\
|
|   To learn how to make your own language parser, please check the following
|   link:
|       https://npp-user-manual.org/docs/function-list/
|
\=========================================================================== -->
<NotepadPlus>
    <functionList>
        <parser
            displayName="ExtJS"
            id="ExtJS"
            commentExpr=""
        >
            <classRange
                mainExpr="(?xs)Ext\.define.*?}\);"
            >
                <className>
                    <nameExpr
                        expr="(?x-s)Ext\.define\('\K.*(?=')"
                    />
                    
                </className>
                <function
                    mainExpr="(?x-s)^\h*.*?:\h*function"
                >
                    <functionName>
                        <funcNameExpr  expr="(?x-s)^\h*.*?(?=:\h*function)"
                        />
                    </functionName>
                </function>
            </classRange>
			<function
				mainExpr="(?x-s)^\h*.*?:\h*function"
			>
				<functionName>
					<nameExpr expr="(?x-s)^\h*.*?(?=:\h*function)"
					/>
				</functionName>
			</function>
        </parser>
    </functionList>
</NotepadPlus>

Please note, I built it from scratch rather than starting with your expressions, because the functionList debug process can be hard to get right, so I always go through this procedure when developing a new functionList. (Either that, or I start from a known-working one, and tweak the expressions until they match what I want to be different from the original.) If I don’t do it methodically, something will go wrong somewhere. (It did a few times for me, even while I was going methodically through.)

If you need the expressions to handle more subtlety than my simplistic version, you can start from this known-good and then edit it (I suggest very incremental edits, so you can tell each time that it’s still working), iterating until it matches your goals.

[PeterJones]

@webpuper said in functionList for ExtJS framework (Sencha):

This is what I am trying to do.

Looking at that again, I think I see what you were trying to do – you were trying to do a “function parser” style with the class name derived from that. That style is better suited to languages like Perl or some of the C-ish languages that allow defining functions like

sub SuperClass::SubClass::FunctionName(...)
or
double Some.Namespace.FunctionName(...)
or similar

… so each function name comes with its class embedded in the same string.

When you have a class wrapper that has multiple functions inside, like yours, it’s really easier to do as a “Class Parser” or as I showed, a “Mixed Parser”. This style makes use of the class-level expression which grabs the whole class into a string, and then tries to extract the class name and any method names from that grabbed string.

[webpuper]

@peterjones
thank you very much

Now I understand everything

[PeterJones]

@webpuper said in functionList for ExtJS framework (Sencha):

Now I understand everything

Lucky you. I cannot even say that “I understand everything about Function List”, let alone say that “I understand everything, period.” ;-)

But, seriously, I’m glad I was able to help you understand a bit better.

Good luck.

[webpuper]

This post is deleted!

[webpuper]

@peterjones said in functionList for ExtJS framework (Sencha):

Then I add a <classRange> that’s trying to find from Ext.define through });

And if inside the class there are also “});” ?

[PeterJones]

@webpuper said in functionList for ExtJS framework (Sencha):

And if inside the class there are also “});” ?

Then it’s going to become a super-complicated regular expression that I don’t have the expertise to develop. Maybe one of the regex gurus will be able to step in… it will work better if you show a valid class that contains that sequence inside.

You might try searching the forum for @guy038’s regex examples for “balanced” parentheses or brackets. That might give you some idea of where to start.