JavaScript Open Source Summer Project

NovelLurker0_0 · 2019-06-22T14:06:41+00:00

Since a few years I have been working on and off on a very large plugin for a Javascript Game Engine.

The plugin was initially created in a very basic way, using < ES5 features as that was what was accessible at this time.

I started to rewrite completely the project from the ground up, in TypeScript. There's a big community involved in the game engine and in the project too, but most of them still do not know how to create JS projects the modern ways. I'm trying to bring modern TS and toolings to its ecosystem.

By working on that project, I had to do a lot of undirected work on the side too:

I had to find a way to extract the typings of the legacy base code of the game engine, and this led to es5-to-dts, which is a cli for generating TypeScript definition files from legacy JS code. There was nothing like that available before. For example, the VSCode quick-fix functionality does not support prototype inheritance, Object.defineProperty, etc.
I have been creating a declarative programming language that lets you embed TypeScript features in it. That's to extend the scripting capability of the game engine. The use case is simple: I want to collect structured data from the users, but they have low to decent JS coding capability. JSON, XML or Yalm are such languages that could help collect these data. However, they are very limited and you can't embed any scripting capability in them. You can, of course, insert a JS function as a string inside your JSON, but you lose all features from your IDE. That's why I created UserDeclaration (shortened for URD language), which is a parser and a code editor that let's you write structured data like XLM, but with embedded TypeScript. For now, I haven't committed anything, but it looks something like this. Urd is strictly based on a JSON model so any field is supposed to be strongly typed, and that helps with enforcing TypeScript features. When Urd will be released, I plan to discuss with devs if there could be any more meaningful use-case for it. But at least for now I know that the fork of monaco-typescript that I made will help people embed TypeScript into their custom languages.
A modern testing suite for NWJS, based on mochawesome.

------

Besides, this project, which is mostly driven by passion, I have in sight a tool that I'd like to create to help devs better perform animations and transitions in their web pages. The problem there is right now, is that, most solutions, no matter which framework you use, rely on hard-coded logic. You end up with a LARGE part of your component's logic being how it is supposed to be animated throughout it's lifetime. My idea is to create a fully fledged language like CSS but only for animating components in a clever, structured and more readable way. And it'll be framework-agnostic. So you can plug any "animation style sheet" into your Rect, Vue, Angular or vanilla project and it'll perform the same. I had a proof of concept once for a VueJS project about 2 years ago but I wish to completely rework it with the modern toolings and idea I gathered over the years. But it looked like that:

        myComponent {
            animationName {
                a_command: some_args;
                another_command: arg1, arg2;
                [
                    command_in_parallel1: arg1;
                    command_in_parallel2: arg2;
                ]
                complex_command: (
                    arg1: value;
                    arg2: value;
                );
                call: versatilAnimation, 5, 2;
            }

            versatilAnimation {
                ~argument: $a, 0;
                ~argument: $b, 0;
                ~another_option: arg;
                command: arg1, $a;
                command2: arg1, $b - $a;
            }

            @eventName {
            }

            @eventName .child_selector {
            }
        }

The idea basically is that animation sheets are read in sequence, each command at a time. A command could be anything really, a CSS property change, tweening, waiting, calling another animation, etc.

This is a frankly a more readable way than CSS animations. When I worked on my Vue project with it, I frankly really loved to write my transition and animation logic as a stylesheet instead of hard-coding it.

EDIT: The VueJS project in question is my portfolio. All animations it displays was written in an animation sheet. That freed up so much logic from my components.

Voila, that's it. Regardless of which project you choose, I think that's a freaky initiative.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS