splitinfinities/example.js

## example.js
// 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 />`)`

## example.rb
# 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 />"`
	// 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 />"`