Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drop Lodash #1041

Closed
jorenbroekema opened this issue Oct 30, 2023 · 2 comments
Closed

Drop Lodash #1041

jorenbroekema opened this issue Oct 30, 2023 · 2 comments

Comments

@jorenbroekema
Copy link
Collaborator

jorenbroekema commented Oct 30, 2023

@Tahul

Mostly wanna drop this because Lodash is quite a node_modules bloating thing, and usually modern JS can do it already anyway. We don't use that much of lodash anyway, shouldn't be too much work.

@lb-
Copy link

lb- commented Nov 27, 2023

By the looks of things, it's only used for the template code & examples.

  • lib/common/formats.js
  • examples/advanced/custom-formats-with-templates/build.js
  • examples/advanced/tokens-deprecation/build.js
  • scripts/handlebars/templates/formats.hbs
  • lib/register/template.js

I assume these need to still be supported, what would be the best approach here?

Maybe the template package to be used standalone https://www.npmjs.com/package/lodash.template (however, I think Lodash still needs to make utils available inside the function like forEach).

@jorenbroekema
Copy link
Collaborator Author

jorenbroekema commented Nov 27, 2023

With regards to template, I think it would be good to just take the templates and turn them into template literals (function that returns template literal if dynamic vars are needed). ES6 has a good method for templating nowadays so then we don't need some third-party templating lib like lodash for it anymore.

Before:

export default `<?xml version="1.0" encoding="UTF-8"?>
<%
var props = dictionary.allTokens.filter(function(prop) {
  return prop.attributes.category === 'color';
});
%>
<%= fileHeader({file, commentStyle: 'xml'}) %>
<resources>
  <% props.forEach(function(prop) {
  %><color name="<%= prop.name %>"><%= prop.value %></color><% if (prop.comment) { %><!-- <%= prop.comment %> --><% } %>
  <% }); %>
</resources>`;

After:

export default (props, fileHeader) => `<?xml version="1.0" encoding="UTF-8"?>
${fileHeader}
<resources>
  ${props.reduce(
    (acc, prop) =>
      `${acc}  <color name="${prop.name}">${prop.value}</color>${
        prop.comment ? `<!-- ${prop.comment} -->` : ''
      }\n`,
    '',
  )}
</resources>`;

@jorenbroekema jorenbroekema moved this from Todo to In Progress in Style Dictionary v4 Apr 9, 2024
@jorenbroekema jorenbroekema self-assigned this Apr 9, 2024
@jorenbroekema jorenbroekema moved this from In Progress to Todo in Style Dictionary v4 Apr 18, 2024
@jorenbroekema jorenbroekema moved this from Todo to Done in Style Dictionary v4 Apr 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

No branches or pull requests

2 participants