DEV Community: Sajeeb Ahamed

Create an Enum representation in JavaScript using Proxy object.

Sajeeb Ahamed — Tue, 09 Aug 2022 19:03:00 +0000

And finally, I've found a real use-case of a Proxy object in JavaScript. Many developers love to use enums in their code but as a JavaScript developer, you don't have the opportunity to use that cool feature.

As there is no such feature in JavaScript, let's create a custom implementation of creating an enum. No more talking, deep dive into the code.

const createEnum = (structure) => {
    if (structure === null || typeof structure !== 'object' || Array.isArray(structure)) {
        throw Error(`'${structure}' is not a valid enum structure.`);
    }

    for (const key in structure) {
        if (!['number', 'string', 'boolean'].includes(typeof structure[key])) {
            throw Error(
                `You are only allowed to use 'number', 'string' or 'boolean' types, but you are using '${JSON.stringify(
                    structure[key]
                )}'`
            );
        }
    }

    return new Proxy(structure, {
        set(target, prop) {
            if (Reflect.has(target, prop)) {
                throw Error(`Cannot assign to '${prop}' because it is a read-only property.`);
            } else {
                throw Error(`Property '${prop}' does not exist on the enum structure.`);
            }
        },
        get(target, prop) {
            return Reflect.get(target, prop);
        },
    });
};

Create the function

Here, we are creating a createEnum function, that accepts a parameter structure. This structure is a plain object like [key: string]: number | string | boolean. So, what does it mean?

This means the structure object only supports a string type key and a string or number or boolean type value. For example-

const structure = {
  PENDING: 'pending',
  ACCEPTED: 'accepted',
  REJECTED: 'rejected'
}

As we are trying to create a utility function and want other developers to use that function, so, we have to do some sanitization.

First check if the structure is an object or not.

if (structure === null || typeof structure !== 'object' || Array.isArray(structure)) {
    throw Error(`'${structure}' is not a valid enum structure.`);
}

In the code above, we are checking if the structure is an object or not. We can easily check whether a variable is an object or not by checking its type (typeof structure === 'object'). But the problem is typeof null and typeof [] also return 'object'. So, we have to keep in mind those cases as well.

If the structure is an object, then check the object is a valid one.

for (const key in structure) {
  if (!['number', 'string', 'boolean'].includes(typeof structure[key])) {
    throw Error(
      `You are only allowed to use 'number', 'string' or 'boolean' types, but you are using '${JSON.stringify(
          structure[key]
      )}'`
    );
  }
}

Previously we are checking whether the structure param is an object or not. If this is an object, then we have to check the validity of that object's values. For an enum, we can only assign string | number | boolean type values.

In the code above we are checking all the properties of the structure object, and if there is any value that exists which is not a number or string or boolean then throw an error.

Finished the sanitization. Now it's time to create the `Proxy`.

We've completed our sanitization for the structure param. Now create the enum.

Our goals are -

Creating an object which is not extendable and changeable a.k.a not modifiable.
If someone tries to modify it, then throw an error.

We can easily prevent an object from being modified by using the Object.freeze() function. But the problem is that Object.freeze() won't throw an error if you try to change a property or add a new property. Then how could we do that?

Here, the Proxy comes as a rescuer.

In short, a Proxy accepts a target object and can listen to any change in the target object and return a new object. For more about proxy you can read this.

One of our goals is to prevent the modification of the structure object's properties and throw errors if any modification happens. By using the set handler function we can do it easily.

return new Proxy(structure, {
  set(target, prop) {
    if (Reflect.has(target, prop)) {
      throw Error(`Cannot assign to '${prop}' because it is a read-only property.`);
    } else {
      throw Error(`Property '${prop}' does not exist on the enum structure.`);
    }
  },
  get(target, prop) {
    return Reflect.get(target, prop);
  },
});

Inside the set handler function we are simply throwing some errors and this simple trick prevents us to modify any property to that object. Here, we are checking if the changing property already exists in the object or not. If it exists that means we are trying to change an existing property, otherwise we are trying to add some new property. In these cases, we are throwing two separate errors.

And also, a question may arise in your mind, what the heck is this Reflect thing doing here? According to MDN

Reflect is a built-in object that provides methods for >interceptable JavaScript operations. The methods are the same as those of proxy handlers. Reflect is not a function object, so it's not constructible.

The get function of the proxy handler is just returning the respective value of a property.

Doing a lot of things. Now it's time to test the function.

Yes, this is the exciting moment of testing our implementation. Let's do it.

const Status = createEnum({
    PENDING: 'pending',
    ACCEPTED: 'accepted',
    REJECTED: 'rejected'
});

Bingo! we have created our first enum 🎉. Now we can use that enum like Status.PENDING, Status.ACCEPTED, ... etc. But wait, how does it being different from a regular object?

I think you've already guessed the difference. If we try to do something like this-

// ❌ Invalid assignment
Status.PENDING = 'loading'; //Error: Cannot assign to 'PENDING' because it is a read-only property.
Status.NEW_VALUE = 'new-value'; //Error: Property 'NEW_VALUE' does not exist on the enum structure.

This change will cause you an error that does not happen for a normal object.

See a real use-case for this enum.

const user = {
  id: '3423',
  name: 'John Doe',
  email: 'john@example.com',
  status: Status.PENDING,
};

// ✅ The condition is true
if (user.status === Status.PENDING) {
  console.log('Pending user');
}

Here, we used the enum to an almost real scenario 😛. We declared a user object and for the status property, we assigned a value from the Status enum. Also, we are checking the user.status with the Status enum.

We did it... 🎉 🎉 🎉

Conclusion

From this article we are going to know about Enums, Proxy, Reflect and many more 😉. An enum is very useful for writing clean and readable code. Here, we've created an enum using JavaScript Proxy object and prevent the enum from being modified externally. For doing that we've used Proxy's set and get handler functions. And finally, we can achieve what we are expecting.

Create your own Joomla! 4 component using the JEXT-CLI application.

Sajeeb Ahamed — Fri, 26 Mar 2021 10:18:26 +0000

Hello, all the Joomla extension developers. Today I am going to share with you a nice CLI application for generating Joomla! 4 components. So, tie your belt, and let's start the journey.

The stable version of Joomla! 4 is going to release very soon. And as it is a major release so there are some major changes that may break your existing extensions. So it would be hard for the developers to upgrade the extensions from Joomla! 3 to 4.

In this statement, you may disagree with me that upgrading from 3 to 4 is not that much hard. If one already makes compatible his/her extension for 3.9.x then it's easy. I also agree with you. But Joomla! 4 brings a newly organized component structure for you. What if you want to taste the original flavor? You need to do more.

Today, I am going to introduce you to a new CLI application. The application helps you to create a component by just running a simple command in the terminal. This will provide you a boilerplate of a structured Joomla! 4 component.

By using this you can create a new component and also brings your business logic from your existing components after creating a new component (as J4 still provides you MVC structure).

Here the question is how to use it? It's quite easy. Just follow me-

For using the jext-cli you need php-cli and composer installed in your machine. The installation is written for Linux & Mac users. For Windows users, this is not going to work.

Installation

Clone the Github repository git clone https://github.com/ahamed/jext-cli.git
Navigate to the directory, cd jext-cli
Install the project dependencies, composer install
Update the autoloading classes, composer dump-autoload -o
Install the CLI tool, ./install.sh (for macOS & Linux)
Check if the tool is installed, jext-cli --help

If you find the manuscript that means the jext-cli is installed on your machine globally.

Usage

You can create components and views for a component now. For creating a component first navigate to your Joomla! 4 project root directory, cd path/to/your/project/root, then run-

jext-cli --component|-c <component_name>

Here, --component|-c means any of --component or -c, and the <component_name> is the name of your component. Please don't use a multi-word name as a component name.

This command will ask for some basic meta-information. They are-

Author name (What is the name of the component author. If skip jext-cli will take the current username as author name.)
Author Email (The email address of the component author. If skip then it will be empty.)
Author Url (The author website url, If skip then it will be empty.)
Description (The component description. If skip then it will be empty.)
Copyright (Copyright information, default (C) {year}, {Author name}.)
License (Component license information, default MIT)
Version (Component initial version number, default 1.0.0)
Namespace (The component's namespace, default Joomla\Component\<ComponentName>. Using the default is recommended.)
Do you confirm component creation? (Hit enter if everything is okay. If not then type no and hit enter.)

Fill them up correctly and this will create the component.

By default, the JEXT-CLI creates a component with two sample views. If you don't want to create the views with the component then use --no-sample-view flag with it. For example-

jext-cli --component <component_name> --no-sample-view

Here you successfully created your component. Now we know all components have one or more views. The views are categorized into two types. Administrator view and site view. Here the administrator views are called back views, and the site views are called front views. For creating a view, the command is-

jext-cli --view [--back|-b, [--front|-f, [--both|-bt]]]

Here, the [--back|-b, [--front|-f, [--both|-bt]]] means any of the six options. If I describe the options, then they are-

--back|-b means either --back or -b which stands for the back view or the administrator view.
--front|-f means either --front or -f which stands for the front view or the site view.
--both|-bt means either --both or -bt stands for both administrator and site views.

After running any of the commands the application asks you the component name. This indicates for which component you are going to create a view.

After putting the valid component name the system will ask you for the view's names. You have to enter two names for a view. One is the singular name and another is the plural name. The JEXT-CLI can predict the plural name after you entering the singular name. If you think the prediction is correct then just hit enter otherwise, enter the plural name. That's all for creating a view. All the related (controller, model, view) files are created for you. This also injects the required language strings, SQL queries, and other required codes for making the view functional.

Your view is created. You can create as many views as you need. After creating all the views log in as administrator to the project then go to Settings > Discover. There you can see the component waits for you to install. Select the component and click the Install button from the toolbar.

Hurra! the component has been installed. Now from the sidebar, go to Components > Your component. Here you get your views.

Conclusion

The JEXT-CLI can boost up your development speed and helps you to write error prune code. If anyone is interested to contribute to the project then you are welcome. In the next versions, the JEXT-CLI will try to bring the ability to create plugins, and modules, also provide support for Joomla! 3.

DEV Community: Sajeeb Ahamed

Create an Enum representation in JavaScript using Proxy object.

Create the function

First check if the structure is an object or not.

If the structure is an object, then check the object is a valid one.

Finished the sanitization. Now it's time to create the Proxy.

Doing a lot of things. Now it's time to test the function.

See a real use-case for this enum.

Conclusion

Create your own Joomla! 4 component using the JEXT-CLI application.

Installation

Usage

Conclusion

Finished the sanitization. Now it's time to create the `Proxy`.