Add a utility for resolving NPM resources from webjars and CDNs

[dsyer]

JavaScript in the browser has come a long way and native support for ECMAScript (aka es6 or esm) modules is becoming ubiquitous. Even without explicit support there is a shim that lets you use modules in all browsers with a one line import. The thing that is missing for most Spring Boot apps is ease of use in importing those modules into an HTML page or template.

Note that <script type="importmap"> is a standard feature in browsers, but there is no uniform way to write the paths because the modules can come from literally any URL. Something convention-driven seems to make sense, and since we also support webjars in other ways, something with webjars appeals to me too.

I would like to be able to do this in HTML (note the /npm/* paths in the map values - arbitrary, but convenient):

    <script type="importmap">
        {
            "imports": {
                "bootstrap": "/npm/bootstrap",
                "@popperjs/core": "/npm/@popperjs/core",
                "htmx": "/npm/htmx.org"
            }
        }
    </script>

and then be able to do this (i.e. just use modules like you do in Node.js):

    <script type="module">
        import 'bootstrap';
        import 'htmx';
    </script>

The thing that would enable this is probably best implemented as a @RequestMapping.

[dsyer]

Here's a prototype (https://github.com/dsyer/npm-resolver) that looks for webjars and falls back to unpkg.com if it can't find one:

@RestController
public class NpmVersionResolver {

    private static final Log logger = LogFactory.getLog(NpmVersionResolver.class);

    private static final Set<String> ALERTS = new HashSet<>();

    private static final String PROPERTIES_ROOT = "META-INF/maven/";
    private static final String RESOURCE_ROOT = "META-INF/resources/webjars/";
    private static final String NPM = "org.webjars.npm/";
    private static final String PLAIN = "org.webjars/";
    private static final String POM_PROPERTIES = "/pom.properties";
    private static final String PACKAGE_JSON = "/package.json";

    @GetMapping("/npm/{webjar}")
    public ResponseEntity<Void> module(@PathVariable String webjar) {
        String path = findWebJarResourcePath(webjar, "/");
        if (path == null) {
            path = findUnpkgPath(webjar, "");
            return ResponseEntity.status(HttpStatus.FOUND).location(URI.create(path)).build();
        }
        return ResponseEntity.status(HttpStatus.FOUND).location(URI.create("/webjars/" + path)).build();
    }

    @GetMapping("/npm/{webjar}/{*remainder}")
    public ResponseEntity<Void> remainder(@PathVariable String webjar, @PathVariable String remainder) {
        if (webjar.startsWith("@")) {
            int index = remainder.indexOf("/",1);
            String path = index < 0 ? remainder.substring(1) : remainder.substring(1, index);
            webjar = webjar.substring(1) + "__" + path;
            if (index < 0 || index == remainder.length() - 1) {
                return module(webjar);
            }
            remainder = remainder.substring(index);
        }
        String path = findWebJarResourcePath(webjar, remainder);
        if (path == null) {
            if (version(webjar) == null) {
                path = findUnpkgPath(webjar, remainder);
            } else {
                return ResponseEntity.notFound().build();
            }
            return ResponseEntity.status(HttpStatus.FOUND).location(URI.create(path)).build();
        }
        return ResponseEntity.status(HttpStatus.FOUND).location(URI.create("/webjars/" + path)).build();
    }

    private String findUnpkgPath(String webjar, String remainder) {
        if (!StringUtils.hasText(remainder)) {
            remainder = "";
        } else if (!remainder.startsWith("/")) {
            remainder = "/" + remainder;
        }
        if (webjar.contains("__")) {
            webjar = "@" + webjar.replace("__", "/");
        }
        if (logger.isInfoEnabled() && !ALERTS.contains(webjar)) {
            ALERTS.add(webjar);
            logger.info("Resolving webjar to unpkg.com: " + webjar);
        }
        return "https://unpkg.com/" + webjar + remainder;
    }

    @Nullable
    protected String findWebJarResourcePath(String webjar, String path) {
        if (webjar.length() > 0) {
            String version = version(webjar);
            if (version != null) {
                String partialPath = path(webjar, version, path);
                if (partialPath != null) {
                    String webJarPath = webjar + "/" + version + partialPath;
                    return webJarPath;
                }
            }
        }
        return null;
    }

    private String path(String webjar, String version, String path) {
        if (path.equals("/")) {
            String module = module(webjar, version, path);
            if (module != null) {
                return module;
            } else {
                return null;
            }
        }
        if (path.equals("/main.js")) {
            String module = module(webjar, version, path);
            if (module != null) {
                return module;
            }
        }
        if (new ClassPathResource(RESOURCE_ROOT + webjar + "/" + version + path).isReadable()) {
            return path;
        }
        return null;
    }

    private String module(String webjar, String version, String path) {
        Resource resource = new ClassPathResource(RESOURCE_ROOT + webjar + "/" + version + PACKAGE_JSON);
        if (resource.isReadable()) {
            try {
                JsonParser parser = JsonParserFactory.getJsonParser();
                Map<String, Object> map = parser
                        .parseMap(StreamUtils.copyToString(resource.getInputStream(), StandardCharsets.UTF_8));
                if (!path.equals("/main.js") && map.containsKey("module")) {
                    return "/" + (String) map.get("module");
                }
                if (!map.containsKey("main") && map.containsKey("jspm")) {
                    String stem = resolve(map, "jspm.directories.lib", "dist");
                    String main = resolve(map, "jspm.main", "index.js");
                    return "/" + stem + "/" + main + (main.endsWith(".js") ? "" : ".js");
                }
                return "/" + (String) map.get("main");
            } catch (IOException e) {
            }
        }
        return null;
    }

    private static String resolve(Map<String, Object> map, String path, String defaultValue) {
        Map<String, Object> sub = map;
        String[] elements = StringUtils.delimitedListToStringArray(path, ".");
        for (int i = 0; i < elements.length - 1; i++) {
            @SuppressWarnings("unchecked")
            Map<String, Object> tmp = (Map<String, Object>) sub.get(elements[i]);
            sub = tmp;
            if (sub == null) {
                return defaultValue;
            }
        }
        return (String) sub.getOrDefault(elements[elements.length - 1], defaultValue);
    }

    private String version(String webjar) {
        Resource resource = new ClassPathResource(PROPERTIES_ROOT + NPM + webjar + POM_PROPERTIES);
        if (!resource.isReadable()) {
            resource = new ClassPathResource(PROPERTIES_ROOT + PLAIN + webjar + POM_PROPERTIES);
        }
        if (resource.isReadable()) {
            Properties properties;
            try {
                properties = PropertiesLoaderUtils.loadProperties(resource);
                return properties.getProperty("version");
            } catch (IOException e) {
            }
        }
        return null;
    }

}