Skip to content

How to store ace.js files on Controller's flash #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
casainho opened this issue Jan 19, 2023 · 4 comments
Open

How to store ace.js files on Controller's flash #5

casainho opened this issue Jan 19, 2023 · 4 comments
Assignees

Comments

@casainho
Copy link

When using the IDE, Internet connection is required because Ace is hosted on cdnjs (to reduce storage requirements); but it's possible to bundle required ace.js files on Controller's flash (raise an Issue and I'll explain how to do it)

I wish to have everything local, as I am using an ESP32 with a LOT of memory that I do not use.

@vsolina vsolina self-assigned this Jan 19, 2023
@vsolina
Copy link
Owner

vsolina commented Jan 22, 2023

This requires a bit of effort (for now).
In order to host ace.js files on the controller, a single change to weditor/index.html is necessary:
line 12. which loads ace.js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.11.2/ace.js" type="text/javascript" charset="utf-8"></script>

needs to be changed to:

<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>

Finally ace.js files need to be uploaded to controller into weditor/js/ directory.
There are mandatory files (without them everything breaks):

  • ace.js
  • theme-dracula.js

And optional files:

  • ext-searchbox.js (for search/replace features)
  • mode-python.js (python syntax highlighting)
  • mode-html.js (html syntax highlighting)
  • mode-javascript.js (js syntax highlighting)
  • mode-plain_text.js (slightly better text file support)
  • mode-css.js (css syntax highlighting)

All of these files are available here (v1.14.0):
https://github.com/ajaxorg/ace-builds/tree/62b5377d9d115313fc07dc74926b292cc7683497/src
Or better, minified versions here (smaller files, faster load times):
https://github.com/ajaxorg/ace-builds/tree/62b5377d9d115313fc07dc74926b292cc7683497/src-min

@casainho
Copy link
Author

Please link this information on the main README.

@gitcnd
Copy link

gitcnd commented Oct 28, 2023

If you want to gzip-compress the ace.js file (makes it 117179 instead of 439253 bytes) you can use my MicroWebSrv.py from https://github.com/gitcnd/MicroWebSrv

OR better - use https://github.com/gitcnd/MicroWebSrv/blob/master/microWebSrv-min.py (but name it MicroWebSrv.py).
save it as ace.js.gz and adjust index.html like this:-

<script src="js/ace.js.gz" type="text/javascript" charset="utf-8"></script>

(you can compress other web files too if you want - not .py of course though). Do not use brotli (gzip only) - brotli is only supported in browsers over HTTPS.

@gitcnd
Copy link

gitcnd commented Oct 28, 2023

also, if you want to gzip all the ace files/dependencies, edit the ace.js file and find this text:

createElement("script");i.src=e",n.appendChild(i)

and change it to this:-

createElement("script");i.src=e+".gz",n.appendChild(i)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants