Microsoft 365 Community Community Demos, 29 Apr 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Localization check inside SharePoint Framework projects – VS Code extension increases productivity

Description

In this 12-minute Developer-focused demo, Sergei Sergeev steps through a Visual Studio Code and Node.js extension that keeps resources in sync by making sure all localization labels inside SharePoint Framework project files across the organization are consistent. The extension is automatically activated for your SPFx solutions and checks, whether localization resource files (en-us.js, nl-nl.js, etc.) follow the pattern, defined in the corresponding strings.d.ts. Prevents accidental or refactoring errors in SPFx solutions. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on April 29, 2021.

Demo Presenter: Sergei Sergeev (Mastaq) | @sergeev_srg

Supporting materials:
• Blog - SPFx Check Locale - a nice option to check your localization consistency across SharePoint Framework solution | https://spblog.net/post/2021/04/29/spfx-check-locale-a-nice-option-to-check-your-localization-consistency-across-sharepoint-framework-solution
• VS Code Extension - SPFx Check Locale | https://marketplace.visualstudio.com/items?itemName=s-kainet.spfx-check-locale
• Repo - Checks that your localization files match the schema inside mystrings.d.ts | https://github.com/s-KaiNet/spfx-check-locale

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello, everyone, my name is sergey sergef, I'm from belarus, minsk, I'm sharepoint and microsoft, 365, developer and consultant love development, github and all this stuff how to make sure that all of your localization labels across sharepoint framework solution are consistent. So that's something we're going to see in this demo. Let's get started right away and.

B

A

I have a very simple and very basic as perfect webpart, which simply outputs a localization label. So if you go and see the code, then in the hello world component I have a strings dot greeting which shows me this uh this nice label. Here now, let's say that we need to change something in our localization definition file. For example.

A

um I have a need to rename it to just let's say my label here, so I renamed here I save then let's wait build and then I bet you know what will happen yeah, we don't have our label simply because I forgot to change my individual resource file, so I should rename.

A

Greeting to just my label, then again, I should save: let's go ahead and see what will happen next and palm. We don't have our label still so what's the problem, the problem is that actually I'm running on decay, local. That is why I also have to fix it here so in two files.

A

Finally, if you wait for a while, then our label is available. So basically uh you see the problem.

A

I changed something in our: let's call it primary resource definition file, but I haven't changed individual resource files and from from build standpoint everything is okay. You don't have any build errors, you don't have any exceptions or problems, but actually on the user interface, we were missing a label.

A

That is why, every time you modify something in your primary resource definition file, you should carefully copy all changes across all your individual resource files and while here it's not a big deal but in a bigger solution, it might be a real problem, for example, check out here. That's pnp, modern search solution, and here we have a lot of different labels, including a few nested levels.

A

Also, that's a common localization file, but we also have localization files for each individual web parts. So here the solution to keep all resources in sync with primary definition file is a little bit more complicated.

A

But fortunately now we have a solution to this problem. So you should go to your extensions and then you should install s prefix local check extension. Basically, I have it here, but disabled, let's enable, and now let's see what will happen.

A

If I do the same, let's say if I want to rename it back to just greeting like this and then click save then immediately. Visual study code reports me two errors in this file. So if I open, then we have this error and if you hover over, then it says that this object should have only known properties and this my label does not exist in type hello world, the part strings. So it means that I should to make it work.

A

I should rename this then save so now the problem disappeared, and I should do the same here and now finally- and also, I think, should should be a name here and finally, I have my build fixed and still I have my localization label here and it works for all solutions if we change anything for pinky, modern search, if you rename it like this, for example, then again immediately, we have a clear indication that there are some problems with our resource files.

A

So if we scroll down this, then you see that this again, this property is, does not exist in type, and it also suggests you the right even right name for this property, but if I rename it back and then and then save, then all problems disappeared. So this is how this extension works. It helps you to easily identify all potential problems with all of your resource, localization files, so how it works under the hood under the hood.

A

It goes to your configuration file and then it looks through all of the localization resource folders then in memory it creates a typescript project for every localization resource folder, where every file inside those folder is a typescript source file. So actually it renames again. It happens in memory, it renames all javascript to typescript so like this, then it goes to definition, file and using typescript syntax tree. It extracts the interface name and then again in memory. It adds a type definition for this function.

A

So now now our now our resource file is strongly typed, and if we have any inconsistency, then the error will be reported immediately. So it happens in the extension in memory using virtual file system typescript virtual file system, so it compiles typescript project for every localization resource file. And if there are any errors, then these errors will be mapped to your visual studio code instance using visual studio code diagnostic api.

A

So this is how this stuff works under the hood. So now I'm going to revert back just a javascript file.

A

Now, please, but as perfect check. Local is not only a vs code extension, but that's only the energy s model and node.js module gives you an option to to implement such kind of checks inside your build pipeline, for example, here you can create a new gulp task which performs validation check on all of your resource files, so that all of your individual localization files are consistent with your primary resource definitions.

A

So if you check it here, then that's the model called des prefix check local. Then we have one function check for errors, and this function accepts path, root, path to root, folder of your s, perfect project and optionally. You can say whether you want to print errors or not and then, as a result, we have an array of diagnostic data. This array contains all found errors and metadata about errors.

A

If this array is empty, then everything is good, so we are done without error message and if not, then we report error messages back like this, so, for example, if I let's say let's say I have it- I have it renamed here to something like this, then save, and if I try try to try to run um production build, then the build will fail, simply because I have now having consistency between my localization resource files. So this task earth, because we found errors in localization files and also in the output.

A

It shows exact line where the problem is so that you can go and fix all potential problems. For example, I should just rename this one back to just greeting in that way. If we, if we run it again, then all problems will be cleared.

A

So you can. You can use this gulp additional gulp task, for example, in your continuous integration process, to have additional verification that all your localization resource files are in sync, with your master or primary uh virtualization resource definition file, so basically yeah. This is it from my site. Thank you very much for this opportunity.

B

Excellent. Thank you, sir. Okay. Now don't don't put the visa studio code away just a few few pointers just to call out um as we're cheat chatting a few questions, because we have a few minutes so, just out of curiosity you're, probably using this in your day-to-day work right so you're, building and- and this is it was that where the whole need came from so to start curiosity, what was the original reason why you created the extension?

B

A

Reason is that if you so, the first reason is that sometimes, if you have a lot of localization resource files, then you might see problems on user interface.

A

If you forget to to update something or to add something, so in this case, extension will be, will help you to easily identify these problems, and the second reason is, if you, for example, in code, if you somehow transform your localization keys, localization labels, then if any label is missing for any language, then we will have not only user interface problem, but you will have a runtime exception and the whole web part will not work. Yeah.

B

This is super super useful. A lot of people were super happy about what we've done here and great extensions. Just out of curiosity, how hard was the creation of the extension so for those who might be interested in building their own.

A

Actually, it's not that hard, because there's just a few node.js models which helps which help to create this in memory, virtual file system, typescript project and then the typescript api provides a way to to compile a project to add files and then to to see the problems in the title project: cool. Of course,.

B

Not a big deal, yeah yeah, it's just out of career, so they have it's. It's always interesting to know the how hard it is to build these kind of things, but it's super useful as it is for sure, and thank you sergey for sharing this one.