Provide an easy way to include files Javascript

💡 Ideas
1

The proposal

The include expression includes and evaluates the specified file.

Why have this idea?

  1. Languages like PHP, Python, Javascript with Nodejs are great starting points for building modern websites. Of course, there are several other languages like Ruby, C# and others that can make modern websites too. But I said only the languages I know and use. If I were to list it would be a very long list.
  2. Part of my idea is to implement the word include which is the reserved word in PHPfor including files. I would like to have an include keyword in Javacript to import files at runtime without having to keep doing export and import. Keeping typing import/export is trivial. Languages like PHP already do this, languages like Python too.
  3. So part of my idea is to do something that is already possible in languages like PHP, Python to Javacriptnatively. Which will facilitate the development of algorithms in the language Javacript.
  4. An interesting point, there are several frameworks that do this. Which reinforces my argument that this idea is something interesting and relevant to the Javascript community.

sample 1: only syntax

include './a.js';  // Paths are relative to the current file.
include './a.js';  // Paths are relative to the current file.
include 'b.js';    // This is equivalent './b.js'.
include './c';     // If no extension is found, '.js' will be used.
include "./d.js";  // Single or double quotes are supported.
include '../e.js'; // Upwards directory traversal is supported.
include './f';
include './f.js';  // Duplicates will only be included once.
include './*.js';  // node-glob patterns are supported.

sample 2: variables_test1.js

var color = 'green';

sample 2: variables_test2.js

include './variables_test1.js';
console.log(color); // Output: color green

Some advantages

  1. You don't need to import or export variables, all this is automatic like php
  2. The include works at runtime
  3. This can facilitate the migration of PHP or Python developers to JavaScript
  4. A resemblance to the word reserved Include in PHP / Python
  5. If there is any errors in include, it stops running the script.
  6. You have the warranty that the file will not be included again if it has already been included before.

before: script1.js

export default function Hello() {
return "Hello buddy!";
}

before: script2.js

import { Hello } from './script1.js';
let val = Hello;
console.log(val);

after: script1.js

function Hello() { // without export default
return "Hello buddy!";
}

function Hello2(name) { // without export default
return "name";
}

after: script2.js

include './script1.js'; // without import from 
let name = "willow"
console.log(Hello());
console.log(Hello2(name));

References

2

I'm glad that modern languages have finally started moving away from this old-style includes system - it's an incredibly fragile system that has very little encapsulation, and can cause modules to easily invisibly depend on the load order of one another (e.g. if you include module a, then module b, then module b would automatically have access to the local variables from module a). I much prefer that we explicitly export what we want to export (leaving all other local variables inaccessible), and explicitly import what we want to import. If it's tediouis to manually import every variable you want, then you can always stick them all in a namespace, which isn't overly verbose to use.

// Instead of this:
import { map, filter, reduce } from './utils'
filter(map(...), ...)

// do this:
import * as utils from './utils'
utils.filter(utils.map(...), ...)

I don't find placing export before every value you want to export all that verbose to do, nor do I find it overly verbose to use an imported namespace (e.g. utils) every time I want to access an imported value, so I don't feel like there's a strong reason to provide support for this much more fragile module-loading-system.

4 Likes
3

I love PHP, but in this case "like PHP" is not a desirable thing. PHP's include and require are implicit and magic and make codebases much harder to maintain.

Explicit > implicit.

7 Likes
4

Python doesn't have a keyword like this. Maybe you mean django.urls.include()?

1 Like
5

@ptomato yeah

6

This seems functionally similar to how HTML <script> elements work, but without depending on HTML, allowing it to be used in any environment.

The only reason I like this idea is because of the stupid CORS rules: how come I can't run a script that imports a module? It makes no sense that an import-only script is seen as "a module" by a browser. I have to either use a module bundler, manually convert from ESM to IIFE, disable the security feature from the browser (and remember to enable it after use), start a localhost server, or run it in Node (after proper config in package.json, because it only allows CJS by default).

All of that work just to test a script in a browser? no thanks. I love the ESM system, but CORS is a deal-breaker for me

7

There's no such thing as "files" in JS - that's something node, browsers, etc all add. CORS is also part of HTML, and not part of JS.

I'd suggest giving your feedback to whatwg for browser stuff.

8

That explains some stuff. Thank you for the info

Yep, I learned that when dealing with other kinds of files, or when trying to read data from an element that loads arbitrary data from a server

Speaking of that, I've been thinking of other proposals that aren't for JS, like "Scalable Vector Audio". From what I've read, it seems the SVG standard is from W3C, so I guess I have to post each to its corresponding place