Created
September 22, 2021 18:41
-
-
Save splitinfinities/8dcd1b4acf315632cd1e1dd9891fe8f1 to your computer and use it in GitHub Desktop.
Examples of Stencil's Stats
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // With some bundler parser with Webpack or Rollup: | |
| import json from "./stencil-stats.json" | |
| // or with CSS Import Assertions: | |
| // import json from "./stencil-stats.json" assert { type: "json" }; | |
| export const get_preload_tags = (components, format = "esmBrowser") => { | |
| const entries = json.formats[format]; | |
| const set = components.map((element) => { | |
| let files = []; | |
| const collectionBundles = entries.filter((entry) => | |
| entry.components.includes(element) | |
| ); | |
| collectionBundles.forEach((bundle) => { | |
| files = [bundle.fileName, ...bundle.imports]; | |
| }); | |
| return files | |
| }).flat(); | |
| return [...new Set(set)] | |
| } | |
| // Usage: get_preload_tags(["my-component"]) | |
| // Put this in a template like `get_preload_tags(["my-component"]).map(file => `<link href="https://exmaple.com/{{file}}" as="script" crossorigin />`)` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # WARNING! This has yet to be tested. But the general idea is there. | |
| class StencilStats | |
| attr_accessor :format_name | |
| attr_accessor :outputs | |
| attr_accessor :components | |
| def self.stats_file_path | |
| Rails.root.join('public', 'stencil-library', 'stencil-stats.json') | |
| end | |
| def self.load | |
| result = JSON.parse(File.read(StencilStats.stats_file_path)) | |
| @stats = StencilStats.new(result) | |
| end | |
| def self.get_preload_files(components = [], format_name = "esmBrowser") | |
| load unless @stats | |
| @stats.get(components, format_name) | |
| end | |
| def initialize(object) | |
| @json = object | |
| end | |
| def get_preload_files(components = [], format_name = "esmBrowser") | |
| @components = components | |
| @format_name = format_name | |
| prepare_outputs | |
| file_names | |
| end | |
| private | |
| def prepare_outputs | |
| @outputs = @json.try(:formats).try(@format) | |
| end | |
| def file_names | |
| files = [] | |
| set = components.map do |element| | |
| bundles = @outputs.select { |output| output.components.include? element } | |
| bundles.map { |bundle| [bundle.fileName, ...bundle.imports] } | |
| end | |
| end | |
| end | |
| # Usage: StencilStats.get_preload_files(["my-component"]) | |
| # Put this in your layout's <head> tag like `StencilStats.get_preload_files(["my-component"]).map { |file| "<link href="https://exmaple.com/{{file}}" as="script" crossorigin />"` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment