const loaderUtils = require('loader-utils');

module.exports = function (source, file) {
  // this.cacheable && this.cacheable()
  const query = loaderUtils.parseQuery(this.query);
  let name = loaderUtils.interpolateName(this, query.name, {});
  const rule = new RegExp(`^(${query.rule})$`);
  if (query.prefix) name = name.replace(query.postfix, '');
  if (!rule.test(name)) return source;
  return `
${source}

const Component = ${name}

window.M_PFM = window.M_PFM || {}
window.M_PFM.${name} = {
	Component: Component,
	createRender: function (id, state, handlers) {
		let _state = state;
		let _handlers = handlers;
		return function (state, handlers) {
			state = state || _state
			handlers = handlers || _handlers
			const el = document.getElementById(id);
			ReactDOM.render(<Component { ...state } { ...handlers }/>, el);
		};
	}
}
`;
};