search

BirjuVachhani / spider

A small dart library to generate Assets dart code from assets folder.
https://spider.birju.dev/
Apache License 2.0
190 stars 20 forks source link

Feature/add subgroups support #49

Closed Sanlovty closed 2 years ago

Sanlovty commented 2 years ago

Subgroups support

:interrobang: Questions

Is your feature request related to a problem? Please describe. No

Describe the solution you'd like Described in pull-request.

Describe alternatives you've considered We can talk about how we can best deal with that.

Additional context nothing.

:scroll: Description

I faced the problem of impossibility of adding different prefixes in conjunction with paths into the same class. I decided to propose a solution to this "problem" by changing the structure of config.

:label: Config examples

JSON

{
  "generate_tests":true,
  "no_comments":true,
  "export":true,
  "use_part_of":true,
  "use_references_list": false,
  "package":"resources",
  "groups": [
      {
        "class_name": "Assets",
        "subgroups": [
          {
            "path": "assets/images",
            "types": [ "jpg" ],
            "prefix": "jpg"
          },
          {
            "path": "assets/images",
            "types": [ "png" ],
            "prefix": "png"
          }
        ]
      }
    ]
}

YAML

  generate_tests: true
  no_comments: true
  export: true
  use_part_of: true
  use_references_list: false
  package: resources
  groups:
    - class_name: Assets
      subgroups:
        - path: assets/images
          types: [ jpg ]
          prefix: jpg
        - path: assets/images
          types: [ png ]
          prefix: png

:gear: Generated files

Provided that in assets/images were 3 files: (test2.jpg, test1.png, test3.png)


part of 'resources.dart';

class Assets{ Assets ._();

static const String jpgTest2 = 'assets/images/test2.jpg'; static const String pngTest1 = 'assets/images/test1.png'; static const String pngTest3 = 'assets/images/test3.png'; }

BirjuVachhani commented 2 years ago

I don't understand the example. It seems wrong to me. You can get the same results with current system except the prefix part.

BirjuVachhani commented 2 years ago

How important it is to have different prefixes for the same kind of files? in this case, png and jpg which are put in the same file and class eventually!

Sanlovty commented 2 years ago

How important it is to have different prefixes for the same kind of files? in this case, png and jpg which are put in the same file and class eventually!

I'll give you an example in an hour. And also i have an idea how to prevent my changes from being breaking.

Sanlovty commented 2 years ago

@BirjuVachhani, thank you for your feedback. I added a more detailed description of the problem. Hope u will understand what I’m trying to say .

Problem

I currently work on the project, where figma design has a bunch of assets, separated by feautures. The view of assets/icons/ :

/catalog:
  - cafe.svg
  - hotel.svg
  - museum.svg
  - park.svg
  - particular_place.svg
  - restourant.svg
/catalog_dark:
  - cafe.svg
  - hotel.svg
  - museum.svg
  - park.svg
  - particular_place.svg
  - restourant.svg
/catalog_light:
  - cafe.svg
  - hotel.svg
  - museum.svg
  - park.svg
  - particular_place.svg
  - restourant.svg
/empty_pages:
  - card.svg
  - delete.svg
  - go.svg
  - map.svg
  - search.svg
/menu:
  - heart.svg
  - heart_fill.svg
  - list.svg
  - list_fill.svg
  - map.svg
  - map_fill.svg
  - settings.svg
  - settings_fill.svg
/other:
  - arrow.svg
  - bucket.svg
  - calendar.svg
  - calendar_fill.svg
  - camera.svg
  - card.svg
  - clear.svg
  - close.svg
  - delete.svg
  - fail.svg
  - filter.svg
  - geolocation.svg
  - go.svg
  - info.svg
  - photo.svg
  - plus.svg
  - refresh.svg
  - search.svg
  - share.svg
  - splash.svg
  - tick.svg
  - view.svg
  - way_arrow_left.svg
  - way_arrow_right.svg
  - way_arrow_up.svg
/tutorial:
  - tutorial_1_frame.svg
  - tutorial_2_frame.svg
  - tutorial_3_frame.svg

Sometimes iconpacks for dark and light theme \ different screens differ only by the folder name

Current solution

I would like to have two main classes (Vectores - for vectorized images, Svg - for icons), but i can't do this cos of the repetitiveness of the names. So I can only make a set of classes that I’m not a satisfied at all:

Set of files in solution

svg_catalog_dark.dart

part of 'resources.dart';

class SvgCatalogDark {
  SvgCatalogDark._();

  static const String cafe = 'assets/icons/catalog_dark/cafe.svg';
  static const String hotel = 'assets/icons/catalog_dark/hotel.svg';
  static const String museum = 'assets/icons/catalog_dark/museum.svg';
  static const String park = 'assets/icons/catalog_dark/park.svg';
  static const String particularPlace =
      'assets/icons/catalog_dark/particular_place.svg';
  static const String restourant = 'assets/icons/catalog_dark/restourant.svg';
}

svg_catalog_light.dart

part of 'resources.dart';

class SvgCatalogLight {
  SvgCatalogLight._();

  static const String cafe = 'assets/icons/catalog_light/cafe.svg';
  static const String hotel = 'assets/icons/catalog_light/hotel.svg';
  static const String museum = 'assets/icons/catalog_light/museum.svg';
  static const String park = 'assets/icons/catalog_light/park.svg';
  static const String particularPlace =
      'assets/icons/catalog_light/particular_place.svg';
  static const String restourant = 'assets/icons/catalog_light/restourant.svg';
}

svg_catalog.dart

part of 'resources.dart';

class SvgCatalog {
  SvgCatalog._();

  static const String cafe = 'assets/icons/catalog/cafe.svg';
  static const String hotel = 'assets/icons/catalog/hotel.svg';
  static const String museum = 'assets/icons/catalog/museum.svg';
  static const String park = 'assets/icons/catalog/park.svg';
  static const String particularPlace =
      'assets/icons/catalog/particular_place.svg';
  static const String restourant = 'assets/icons/catalog/restourant.svg';
}

svg_empty_pages.dart

part of 'resources.dart';

class SvgEmptyPages {
  SvgEmptyPages._();

  static const String card = 'assets/icons/empty_pages/card.svg';
  static const String delete = 'assets/icons/empty_pages/delete.svg';
  static const String go = 'assets/icons/empty_pages/go.svg';
  static const String map = 'assets/icons/empty_pages/map.svg';
  static const String search = 'assets/icons/empty_pages/search.svg';
}

svg_menu.dart

part of 'resources.dart';

class SvgMenu {
  SvgMenu._();

  static const String heart = 'assets/icons/menu/heart.svg';
  static const String heartFill = 'assets/icons/menu/heart_fill.svg';
  static const String list = 'assets/icons/menu/list.svg';
  static const String listFill = 'assets/icons/menu/list_fill.svg';
  static const String map = 'assets/icons/menu/map.svg';
  static const String mapFill = 'assets/icons/menu/map_fill.svg';
  static const String settings = 'assets/icons/menu/settings.svg';
  static const String settingsFill = 'assets/icons/menu/settings_fill.svg';
}

svg_other.dart

part of 'resources.dart';

class SvgOther {
  SvgOther._();

  static const String arrow = 'assets/icons/other/arrow.svg';
  static const String bucket = 'assets/icons/other/bucket.svg';
  static const String calendar = 'assets/icons/other/calendar.svg';
  static const String calendarFill = 'assets/icons/other/calendar_fill.svg';
  static const String camera = 'assets/icons/other/camera.svg';
  static const String card = 'assets/icons/other/card.svg';
  static const String clear = 'assets/icons/other/clear.svg';
  static const String close = 'assets/icons/other/close.svg';
  static const String delete = 'assets/icons/other/delete.svg';
  static const String fail = 'assets/icons/other/fail.svg';
  static const String filter = 'assets/icons/other/filter.svg';
  static const String geolocation = 'assets/icons/other/geolocation.svg';
  static const String go = 'assets/icons/other/go.svg';
  static const String info = 'assets/icons/other/info.svg';
  static const String photo = 'assets/icons/other/photo.svg';
  static const String plus = 'assets/icons/other/plus.svg';
  static const String refresh = 'assets/icons/other/refresh.svg';
  static const String search = 'assets/icons/other/search.svg';
  static const String share = 'assets/icons/other/share.svg';
  static const String splash = 'assets/icons/other/splash.svg';
  static const String tick = 'assets/icons/other/tick.svg';
  static const String view = 'assets/icons/other/view.svg';
  static const String wayArrowLeft = 'assets/icons/other/way_arrow_left.svg';
  static const String wayArrowRight = 'assets/icons/other/way_arrow_right.svg';
  static const String wayArrowUp = 'assets/icons/other/way_arrow_up.svg';
}

svg_tutorial.dart

part of 'resources.dart';

class SvgTutorial {
  SvgTutorial._();

  static const String tutorial1Frame =
      'assets/icons/tutorial/tutorial_1_frame.svg';
  static const String tutorial2Frame =
      'assets/icons/tutorial/tutorial_2_frame.svg';
  static const String tutorial3Frame =
      'assets/icons/tutorial/tutorial_3_frame.svg';
}
part of 'resources.dart';

class Images {
  Images._();

  static const String splashBg = 'assets/images/splash_bg.png';
  static const String splashLogo = 'assets/images/splash_logo.png';
}

images.dart

part of 'resources.dart';

class Images {
  Images._();

  static const String splashBg = 'assets/images/splash_bg.png';
  static const String splashLogo = 'assets/images/splash_logo.png';
}

resources.dart

part 'images.dart';

part 'svg_catalog.dart';

part 'svg_catalog_light.dart';

part 'svg_catalog_dark.dart';

part 'svg_empty_pages.dart';

part 'svg_menu.dart';

part 'svg_other.dart';

part 'svg_tutorial.dart';

I also need tests, and it adds me 8 files 🌵, instead of 2 needed

Possible solution with my idea

Set of files in solution

svgs.dart

part of 'resources.dart';

class Svgs {
  Svgs._();

  static const String catalogCafe = 'assets/icons/catalog/cafe.svg';
  static const String catalogHotel = 'assets/icons/catalog/hotel.svg';
  static const String catalogMuseum = 'assets/icons/catalog/museum.svg';
  static const String catalogPark = 'assets/icons/catalog/park.svg';
  static const String catalogParticularPlace =
      'assets/icons/catalog/particular_place.svg';
  static const String catalogRestourant = 'assets/icons/catalog/restourant.svg';
  static const String catalogLightCafe = 'assets/icons/catalog_light/cafe.svg';
  static const String catalogLightHotel =
      'assets/icons/catalog_light/hotel.svg';
  static const String catalogLightMuseum =
      'assets/icons/catalog_light/museum.svg';
  static const String catalogLightPark = 'assets/icons/catalog_light/park.svg';
  static const String catalogLightParticularPlace =
      'assets/icons/catalog_light/particular_place.svg';
  static const String catalogLightRestourant =
      'assets/icons/catalog_light/restourant.svg';
  static const String catalogDarkCafe = 'assets/icons/catalog_dark/cafe.svg';
  static const String catalogDarkHotel = 'assets/icons/catalog_dark/hotel.svg';
  static const String catalogDarkMuseum =
      'assets/icons/catalog_dark/museum.svg';
  static const String catalogDarkPark = 'assets/icons/catalog_dark/park.svg';
  static const String catalogDarkParticularPlace =
      'assets/icons/catalog_dark/particular_place.svg';
  static const String catalogDarkRestourant =
      'assets/icons/catalog_dark/restourant.svg';
  static const String emptyPagesCard = 'assets/icons/empty_pages/card.svg';
  static const String emptyPagesDelete = 'assets/icons/empty_pages/delete.svg';
  static const String emptyPagesGo = 'assets/icons/empty_pages/go.svg';
  static const String emptyPagesMap = 'assets/icons/empty_pages/map.svg';
  static const String emptyPagesSearch = 'assets/icons/empty_pages/search.svg';
  static const String menuHeart = 'assets/icons/menu/heart.svg';
  static const String menuHeartFill = 'assets/icons/menu/heart_fill.svg';
  static const String menuList = 'assets/icons/menu/list.svg';
  static const String menuListFill = 'assets/icons/menu/list_fill.svg';
  static const String menuMap = 'assets/icons/menu/map.svg';
  static const String menuMapFill = 'assets/icons/menu/map_fill.svg';
  static const String menuSettings = 'assets/icons/menu/settings.svg';
  static const String menuSettingsFill = 'assets/icons/menu/settings_fill.svg';
  static const String otherArrow = 'assets/icons/other/arrow.svg';
  static const String otherBucket = 'assets/icons/other/bucket.svg';
  static const String otherCalendar = 'assets/icons/other/calendar.svg';
  static const String otherCalendarFill =
      'assets/icons/other/calendar_fill.svg';
  static const String otherCamera = 'assets/icons/other/camera.svg';
  static const String otherCard = 'assets/icons/other/card.svg';
  static const String otherClear = 'assets/icons/other/clear.svg';
  static const String otherClose = 'assets/icons/other/close.svg';
  static const String otherDelete = 'assets/icons/other/delete.svg';
  static const String otherFail = 'assets/icons/other/fail.svg';
  static const String otherFilter = 'assets/icons/other/filter.svg';
  static const String otherGeolocation = 'assets/icons/other/geolocation.svg';
  static const String otherGo = 'assets/icons/other/go.svg';
  static const String otherInfo = 'assets/icons/other/info.svg';
  static const String otherPhoto = 'assets/icons/other/photo.svg';
  static const String otherPlus = 'assets/icons/other/plus.svg';
  static const String otherRefresh = 'assets/icons/other/refresh.svg';
  static const String otherSearch = 'assets/icons/other/search.svg';
  static const String otherShare = 'assets/icons/other/share.svg';
  static const String otherSplash = 'assets/icons/other/splash.svg';
  static const String otherTick = 'assets/icons/other/tick.svg';
  static const String otherView = 'assets/icons/other/view.svg';
  static const String otherWayArrowLeft =
      'assets/icons/other/way_arrow_left.svg';
  static const String otherWayArrowRight =
      'assets/icons/other/way_arrow_right.svg';
  static const String otherWayArrowUp = 'assets/icons/other/way_arrow_up.svg';
  static const String tutorialTutorial1Frame =
      'assets/icons/tutorial/tutorial_1_frame.svg';
  static const String tutorialTutorial2Frame =
      'assets/icons/tutorial/tutorial_2_frame.svg';
  static const String tutorialTutorial3Frame =
      'assets/icons/tutorial/tutorial_3_frame.svg';
}

images.dart

part of 'resources.dart';

class Images {
  Images._();

  static const String splashBg = 'assets/images/splash_bg.png';
  static const String splashLogo = 'assets/images/splash_logo.png';
}

resources.dart

part 'images.dart';

part 'svgs';

spider.yaml

generate_tests: true
no_comments: true
export: true
use_part_of: true
use_references_list: false

package: src/assets/assets

groups:
  - class_name: Images
    package: images
    subgroups:
      - path: assets/images
        types: [ .png, .jpg, .jpeg, .webp, .webm, .bmp ]

  - class_name: Svgs
    package: svgs
    subgroups:
      - path: assets/icons/catalog
        types: [ .svg ]
        prefix: catalog

      - path: assets/icons/catalog_light
        types: [ .svg ]
        prefix: catalogLight

      - path: assets/icons/catalog_dark
        types: [ .svg ]
        prefix: catalogDark

      - path: assets/icons/empty_pages
        types: [ .svg ]
        prefix: emptyPages

      - path: assets/icons/menu
        types: [ .svg ]
        prefix: menu

      - path: assets/icons/other
        types: [ .svg ]
        prefix: other

      - path: assets/icons/tutorial
        types: [ .svg ]
        prefix: tutorial
BirjuVachhani commented 2 years ago

@Sanlovty Thank you for providing more details.

  1. This is a more suitable example. However the problem is still about prefixes. Current version does allow you to specify multiple paths to have all those refs under the same class. So you just want them to have different prefixes in your case. So only having a prefix map with paths would be enough but I somewhat like your solution. I do wanna alter it though.

    • How about sub_groups instead of subgroups.
    • types should be specified at group level if all of the sub groups have the same type. If a type is explicitly specified on subgroup then use that otherwise inherit from the main group.

  2. This can be simplified

groups:
  - class_name: Images
    package: images
    subgroups:
      - path: assets/images
        types: [ .png, .jpg, .jpeg, .webp, .webm, .bmp ]

with this: (the way it is currently! I don't wanna lose that!)

groups:
  - path: assets/images
    class_name: Images
    package: images
    types: [ .png, .jpg, .jpeg, .webp, .webm, .bmp ]
Sanlovty commented 2 years ago

@BirjuVachhani Thank you for your feedback.

:speech_balloon: sub_groups instead of subgroups

- Sure

:speech_balloon: types should be specified at group level if all of the sub groups have the same type. If a type is explicitly specified on subgroup then use that otherwise inherit from the main group.

- Good idea

:speech_balloon: This can be simplified

- Do you want make it possible to use both of structures (current and featured)?

BirjuVachhani commented 2 years ago

@Sanlovty

Do you want make it possible to use both of structures (current and featured)?

Yes! Its essential that we don't break existing structure unless we absolutely have to!

Sanlovty commented 2 years ago

@BirjuVachhani i think we can close this issue due to merge