Skip to content

Instantly share code, notes, and snippets.

@splitinfinities
Created September 22, 2021 18:41
Show Gist options
  • Save splitinfinities/8dcd1b4acf315632cd1e1dd9891fe8f1 to your computer and use it in GitHub Desktop.
Save splitinfinities/8dcd1b4acf315632cd1e1dd9891fe8f1 to your computer and use it in GitHub Desktop.
Examples of Stencil's Stats
// 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 />`)`
# 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