support package and local css includes

[wang-boyu]

This PR tries to address #1267. The user interface remains the same, e.g.:

class MyCustomModule(VisualizationElement):
    package_includes = ["PackageJavaScript.js", "PackageStylesheet.css"]
    local_includes = ["MyCustomJavaScript.js", "MyCustomStylesheet.css"]

Then these included files get saved into package_js_includes, package_css_includes, local_js_includes and local_css_includes attributes. Whether it's a stylesheet or not depends on whether the filename ends with .css.

An alternative approach that is not implemented with this PR would be to let users decide by themselves on demand. For example like this:

class MyCustomModule(VisualizationElement):
    package_js_includes = ["PackageJavaScript.js"]
    package_css_includes = ["PackageStylesheet.css"]  # this is what Mesa-Geo needs
    local_js_includes = ["MyCustomJavaScript.js"]
    local_css_includes = ["MyCustomStylesheet.css"]

In this way we don't need to check whether files are stylesheets or scripts. But this breaks API and introduces more complexity in developing customized elements.

Please feel free to suggest other possible approaches.

[rht]

I think the JS ones should be package_includes and local_includes still, so that this PR does not introduce a breaking change. We haven't decided whether the next release will be 0.10.0 or 1.0.0 yet.

[codecov]

Codecov Report

Merging #1283 (6688204) into main (eb73aac) will decrease coverage by 0.24%.
The diff coverage is 69.23%.

@@            Coverage Diff             @@
##             main    #1283      +/-   ##
==========================================
- Coverage   89.30%   89.05%   -0.25%     
==========================================
  Files          19       19              
  Lines        1234     1243       +9     
  Branches      243      245       +2     
==========================================
+ Hits         1102     1107       +5     
- Misses         99      101       +2     
- Partials       33       35       +2     

Impacted Files	Coverage Δ
mesa/visualization/ModularVisualization.py	74.62% <69.23%> (-1.38%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update eb73aac...6688204. Read the comment docs.

[wang-boyu]

Oh sorry, perhaps I miscommunicated...

This PR (the current implementation) does not break API - both JS and CSS files are specified using package_includes and local_includes by users. We decide internally whether they are scripts or stylesheets.

Are you suggesting we go for the alternative approach, but without breaking the API? For example:

class MyCustomModule(VisualizationElement):
    package_includes = ["PackageJavaScript.js"]       # same as before
    package_css_includes = ["PackageStylesheet.css"]  # new attribute
    local_includes = ["MyCustomJavaScript.js"]        # same as before
    local_css_includes = ["MyCustomStylesheet.css"]   # new attribute

[rht]

class MyCustomModule(VisualizationElement):
    package_includes = ["PackageJavaScript.js"]       # same as before
    package_css_includes = ["PackageStylesheet.css"]  # new attribute
    local_includes = ["MyCustomJavaScript.js"]        # same as before
    local_css_includes = ["MyCustomStylesheet.css"]   # new attribute

Yes, this one.

[rht]

At the same time, implementing #1210 will necessarily introduce breaking change (this change is necessary to simplify the tutorial for Windows and macOS). Maybe we should go to 1.0.0 instead of 0.10.0 after all (@tpike3 @jackiekazil)? Regardless, the rename to package_js_includes and local_js_includes can be done in a separate PR.

[rht]

LGTM