Loading local JS scripts

[khinsen]

For loading JS code, we have clog:load-script. Give it a URL, and that's it. Great.

But what if you want to use your CLOG app offline? You then want the script loaded from a local file. For that, I see only one possibility: define your own :static-root, copy over all the files from CLOG's default root directory, and add the ones you want to load.

Unfortunately, that's not composable. If everyone does it, we won't be able to integrate each other's code.

So... is there another way?

[rabbibotton]

My original thought (not per se the answer) is that every new project starts with its own static-root, and that is the case with all the templates and in truth still solidly the start for any project. That is why the templates are designed that during design time, you load (ql:quicktime :myproj/tools) and during deployment (ql:quicktime :myproj) the idea being that the tools system loads builder related resources, the design time portions of plug-ins etc.

So till now, I have relied on plug-ins using an internet based resource for their files or you manually copy. So the code in the plug-ins templates or look at clog-ace. The code is designed to fall over to internet if the resource not there.

It is a system that works, but is does leave things up in the air a bit for a non-plugin library or code base and just in general. So a tool makes sense to solve and a standard of what is and what will be.

I will work on asap.

[khinsen]

My exploration of clog-ace was in fact what prompted my question. It's a plug-in, but for local asset delivery it relies on the main CLOG project already containing the JS code for Ace. Next, I looked at the clog-plotly plugin and noticed that it has no support for offline use, it relies on a CDN to supply the JS code.

[rabbibotton]

(defmethod init-clog-ace ((obj clog-ace-element))
  (let ((local (format nil "~A/clog-ace/src" clog:*static-root*)))
    (cond ((uiop:directory-exists-p local)
           (load-script (html-document (connection-data-item obj "clog-body"))
                        "/clog-ace/src/ace.js")
           (load-script (html-document (connection-data-item obj "clog-body"))
                        "/clog-ace/src/ext-language_tools.js")
           (load-script (html-document (connection-data-item obj "clog-body"))
                        "/clog-ace/src/ext-modelist.js")
           (js-execute obj "ace.config.set('basePath', '/clog-ace/src/')"))
          (t
           (load-script (html-document (connection-data-item obj "clog-body"))
                        "https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.5/ace.js")
           (load-script (html-document (connection-data-item obj "clog-body"))
                        "https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.5/ext-language_tools.js")
           (load-script (html-document (connection-data-item obj "clog-body"))
                        "https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.5/ext-modelist.js")))))

[rabbibotton]

The idea is the current static route is checked first and then fall over to CDN

[khinsen]

Which means that if I use my own static route, Ace no longer works offline.

[rabbibotton]

right unless you copy the dir to yours which when you load :clog-ace/tools mentions

will look in to how to add additional dirs under static host in the OS side that would be good way to solve issue

[khinsen]

Here is an idea for something that could work, but I have no idea how straightforward it would be to implement.

Imagine CLOG having an asset registry for JS code (but also fonts etc.).

In Lisp code, I'd write something like

(clog:register-local-asset "plotly-code" #P"/path/to/plotly.js")

and then

(clog:load-script (clog:html-document (clog:connection-data-item obj "clog-body")) "/local-assets/plotly-code")

CLOG would set up the underlying Web server to serve a local file from /local-assets.

[rabbibotton]

Will have to come up with something that allows adding on to the static-host dir. Have to go through docs.

[rabbibotton]

almost there :)

[rabbibotton]

Part of the way there, I reworked the server so that now I can control at run-time where files are served out of. I will set up a way to register paths in the www directory to arbitrary directory locations. Then set up a way to have plug-ins auto register their needed paths or allow the user to choose to do so.

[rabbibotton]

clog-connection:add-plugin-path - use alternate static-paths based on regex - this allows plugins and libraries to share your html directory with its own resources

[rabbibotton]

We are now all the way here, take a look at the init function for clog-ace to see how I used so can dynamically add any resource dirs you need. Also update clog-ace with changes I made for CLOG-Builder so that will come over in your use of clog-ace.

[khinsen]

Thanks a lot! That's just perfect!

[rabbibotton]

Agreed, it really opens the horizon for developing for CLOG in larger projects etc. It took use of a :: to work so will ask the API made public. It should be a stable solution either way.

[rabbibotton]

Do you know a good html pretty print for Lisp or in JS?

[rabbibotton]

Let me know what you find :)

[rabbibotton]

https://github.com/beautifier/js-beautify

[rabbibotton]

(load-script (html-document *body*) "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js" :load-only-once t)
(load-script (html-document *body*) "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.min.js" :load-only-once t)
(load-script (html-document *body*) "https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.min.js" :load-only-once t)
(js-query *body* "html_beautify ('<ul><li>123</li><li>124</li></ul>')")

or you can use js_beautify or css_beautify

[khinsen]

That's exactly what I am playing with as well. Looks good so far!

However, I can't yet get it to work from a local copy. I downloaded it

(clog-connection:add-plugin-path "^/html-inspector-views-js/" (asdf:system-relative-pathname :html-inspector-views "js/"))
(load-script (html-document *body*) "/html-inspector-views-js/beautify-html.min.js" :load-only-once t)
(js-query *body* "html_beautify ('<ul><li>123</li><li>124</li></ul>')")

returns NIL because html_beautify isn't defined. The file exists where it is supposed to be:

(probe-file (asdf:system-relative-pathname :html-inspector-views "js/beautify-html.min.js"))

yields #P"/Users/hinsen/common-lisp/html-inspector-views/js/beautify-html.min.js"

[rabbibotton]

clog-connection:add-plugin-path

Need to receive the answer path ie you /www/ directory not your /www/js/ dir

The idea is that for whatever matches the regex it is as if the static root was X

I should probably add a way to allow some other schemes to "mount" dirs even temporarily

[khinsen]

I did a very basic test, which fails:

(clog-connection:add-plugin-path "^/test/" "/Users/hinsen/common-lisp/html-inspector-views")

Then point my browser at http://127.0.0.1:8080/test/README.md. All I see is "Not found".

But I can point my browser at http://127.0.0.1:8080/clog-ace/src/ace.js and see the JavaScript file.

What's the difference? Read permissions are the same on those two files.

[rabbibotton]

So with that plugin path the URL

/test/readme.html

Is at

/Users/hinsen/common-lisp/html-inspector-views/test/README.html

[rabbibotton]

The idea is that virtually the path passed in replaces your current static-path

This allows having your plugins even place files anywhere needed for any URL not just as a dir mount

For example you could do ^/js/x.js and give your own static-path and that one file if requested comes from your /js instead of the consumer of your library. During dev time of your plugin you have your dir for the test etc and someone using your plugin just has the one file virtually in his dir /js/x.js

[khinsen]

Thanks for the clarification! That makes sense and, most of all, it works just fine.

[khinsen]

It's nice to be able to inspect the HTML code corresponding to a clog object!

[khinsen]

And that works fully locally, without a network connection.

[khinsen]

With syntax highlighting by https://highlightjs.org/, it looks even better!

[rabbibotton]

I am fairly happy with results, the builder now uses it. You can also use the JS and CSS formatter for your project. The idea the JS is an extension of Lisp now is something people do not realize the benefits from.

[rabbibotton]

fukamachi is going to expose the API I am using for this so doesn't disappear in the future.

[rabbibotton]

fukamachi/lack@073333b

[khinsen]

Great!