Add entry point index.js

[programarivm]

Hi there, probably it'd be a good idea to add the src/index.js file to allow importing any module similar to MUI as described in the example below.

import { Table, TableBody, TableCell, TableContainer, TableRow } from '@mui/material';

I'm currently using this approach to develop a bunch of chess utilities in the chesslablab/jsblab library which is by the way based on shaack/cm-chessboard:

• src/index.js

import { HistoryButtons, SanMovesTable } from "https://cdn.jsdelivr.net/npm/@chesslablab/jsblab@0.0.3/src/index.min.js";

The entry point index.js will be backward compatible for existing users.

[programarivm]

This is a demo of the HistoryButtons and SanMovesTable modules.

Who knows maybe after successful testing in chesslablab/jsblab those modules could also be added to a new folder called cm-chessboard/src/utils.

import { HistoryButtons, SanMovesTable } from "cm-chessboard";

[shaack]

This type of import (import { HistoryButtons, SanMovesTable } from "cm-chessboard";) is not really ES6 compatible, it only works with transpiling. I prefer to develop with vanilla js, without transpiling and just for deployment I put everything into one file with rollup.

Creating an index.js is another file that has to be maintained when doing changes such as refactoring.

[programarivm]

Well this way of importing ES6 modules seems to be working quite well at chesslablab.org without any transpilation at all. The importmap will probably be easier to maintain as both the shaack/cm-chessboard library and the chesslablab/website get more complex.

<?php

return [
    'js/layout/san/elems.js' => [
        'path' => './assets/js/layout/san/elems.js',
        'entrypoint' => true,
    ],
    'js/layout/rav/elems.js' => [
        'path' => './assets/js/layout/rav/elems.js',
        'entrypoint' => true,
    ],
    '@chesslablab/cmblab' => [
        'version' => '0.0.1',
    ],
    '@chesslablab/jsblab' => [
        'version' => '0.1.3',
    ],
    'bootstrap' => [
        'version' => '5.3.2',
    ],
    'bootstrap/dist/js/bootstrap.bundle.min.js' => [
        'version' => '5.3.2',
    ],
    'bootstrap/dist/css/bootstrap.min.css' => [
        'version' => '5.3.2',
        'type' => 'css',
    ],
    'bootstrap/js/dist/modal.js' => [
        'version' => '5.3.2',
    ],
    'jwt-decode' => [
        'version' => '4.0.0',
    ],
];

See @chesslablab/cmblab

[programarivm]

Also if I'm not very much mistaken, at the moment files need to be imported one by one as it is described at Importing Specific Files From a 3rd Party Package.

[shaack]

Hi Jordi. I am talking about a javascript importmap, like https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap. This allows you to define on a page level where packages are found. It helps if your modules are spread around the project in node_modules, local src and elsewhere.

I don't really see a problem with including multiple files, maybe because I come from the Java world where this is the normal way. But if it helps you a lot, I am thinking about merging the index.js but leaving the examples as they are. Maybe we could add another example page, where index.js is used, for those who may use it.

BTW I like your project, very nice and well coded. 👍