• ClassMetadataInterface service missing?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Хз как иначе это решить, динамически зарегестрировать сервис не выйдет как и передать параметром.
    Старый подход Laravel API validation with Symfony
    Загрузка Metadata class
    Финальный код в комментариях.
    <?php
    declare(strict_types=1);
    
    /*
     * Created by BonBonSlick
     */
    
    namespace App\Domain\Core\Request;
    
    use Symfony\Component\HttpFoundation\Request;
    use Symfony\Component\Validator\Constraints\Length;
    use Symfony\Component\Validator\Constraints\NotBlank;
    use Symfony\Component\Validator\Mapping\ClassMetadataInterface;
    use Symfony\Contracts\Translation\TranslatorInterface;
    
    
    final class AuthRequest extends AbstractValidationRequest {
        private ?string               $email;
        private ?string               $password;
    
        public function __construct(Request $request, TranslatorInterface $translator) {
            parent::__construct($request, $translator);
            $this->email    = (string)$request->get('email');
            $this->password = (string)$request->get('password');
        }
    
        public static function loadValidatorMetadata(ClassMetadataInterface $classMetadata): void {
            $passMin  = 4;
            $passMax  = 32;
            $emailMin = 5;
            $emailMax = 32;
            $classMetadata->addPropertyConstraints(
                'email',
                [
                    new NotBlank(
                        [
                            'message' => parent::simpleTrans('not.blank', 'email'),
                        ]
                    ),
                    new Length(
                        [
                            'min'        => $emailMin,
                            'max'        => $emailMax,
                            'minMessage' => parent::minMaxTrans('email', $emailMin, true),
                            'maxMessage' => parent::minMaxTrans('email', $emailMax),
                        ]
                    ),
                ]
            )->addPropertyConstraints(
                'password',
                [
                    new NotBlank(
                        [
                            'message' => parent::simpleTrans('not.blank', 'password'),
                        ]
                    ),
                    new Length(
                        [
                            'min'        => $passMin,
                            'max'        => $passMax,
                            'minMessage' => parent::minMaxTrans('password', $passMin, true),
                            'maxMessage' => parent::minMaxTrans('password', $passMax),
                        ]
                    ),
                ]
            )
            ;
        }
    
        public function email(): string {
            return $this->email;
        }
    
        public function password(): string {
            return $this->password;
        }
    
    }

    <?php
    declare(strict_types=1);
    
    /*
     * Created by BonBonSlick
     */
    
    namespace App\Domain\Core\Request;
    
    use App\Infrastructure\ArgumentResolver\ValidationRequestInterface;
    use Symfony\Component\HttpFoundation\Request;
    use Symfony\Component\Translation\Exception\InvalidArgumentException as TranslationInvalidArgumentException;
    use Symfony\Component\Validator\Mapping\ClassMetadataInterface;
    use Symfony\Contracts\Translation\TranslatorInterface;
    
    
    abstract class AbstractValidationRequest implements ValidationRequestInterface {
        protected static TranslatorInterface             $translator;
        protected static string                          $messagesFileName   = 'validation';
        protected static string                          $inputNamesFileName = 'input_names';
        protected static string                          $attributesFileName = 'validation_attributes';
        protected static string                          $locale;
        protected Request                                $request;
    
        public function __construct(Request $request, TranslatorInterface $translator) {
            $this->request    = $request;
            self::$translator = $translator;
            // @todo - should be taken from DB or other settings?
            self::$locale = $request->getLocale() ?? $request->getDefaultLocale();
        }
    
        abstract protected static function loadValidatorMetadata(ClassMetadataInterface $metadata): void;
    
        /**
         * translates message with attribute
         *
         * @param string      $messageId          - messages eg "This field is required'
         * @param string      $inputNameId        - input field eg "password"
         * @param string|null $attributeId        - fields in messages eg "size", "resolution", "bytes"
         * @param string|null $messagesFileName   - file for messages
         * @param string|null $inputNamesFileName - file for input names
         * @param string|null $attributesFileName - file for attributes
         * @param string      $localeCode
         *
         * @throws TranslationInvalidArgumentException
         *
         * @return string
         *
         */
        protected static function simpleTrans(
            string $messageId,
            string $inputNameId,
            ?string $attributeId = null,
            ?string $messagesFileName = null,
            ?string $inputNamesFileName = null,
            ?string $attributesFileName = null,
            string $localeCode = 'en' // TODO - should be returned from system settigns
        ): string {
            return self::$translator->trans(
                $messageId,
                [
                    '{{ inputName }}' => self::$translator->trans(
                        $inputNameId,
                        [],
                        $inputNamesFileName ?? self::$inputNamesFileName,
                        $localeCode
                    ),
                    '%attribute%'     => self::$translator->trans(
                        $attributeId,
                        [],
                        $attributesFileName ?? self::$attributesFileName,
                        $localeCode
                    ),
                ],
                $messagesFileName ?? self::$messagesFileName,
                $localeCode
            );
        }
    
        /**
         * @throws TranslationInvalidArgumentException
         */
        protected static function minMaxTrans(
            string $inputNameId,
            int $minMaxValue,
            ?bool $isMin = false,
            ?string $messagesFileName = null,
            ?string $inputNamesFileName = null,
            ?string $attributesFileName = null,
            string $localeCode = 'en' // TODO - should be returned from system settigns
        ): string {
            $id = $isMin ? 'min' : 'max';
            // https://symfony.com/doc/current/translation/message_format.html#pluralization
            return self::$translator->trans(
                $id,
                [
                    '{{ inputName }}'      => self::$translator->trans(
                        $inputNameId,
                        [],
                        $inputNamesFileName ?? self::$inputNamesFileName,
                        $localeCode
                    ),
                    sprintf('%%%s%%', $id) => $minMaxValue,
                    '%value%'              => self::$translator->trans(
                        'character',
                        ['%count%' => 2],
                        $attributesFileName ?? self::$attributesFileName,
                        $localeCode
                    ),
                ],
                $messagesFileName ?? self::$messagesFileName,
                $localeCode
            );
        }
    }

    final class RequestDTOResolver implements ArgumentValueResolverInterface {
        private ValidatorInterface     $validator;
        private ClassMetadataInterface $classMetadata;
        private TranslatorInterface    $translator;
    
        public function __construct(
            ValidatorInterface $validator,
            TranslatorInterface $translator
        ) {
            $this->validator  = $validator;
            $this->translator = $translator;
        }
    
        /**
         * https://symfony.com/doc/current/reference/constraints.html
         *
         * @return \Generator|iterable
         */
        public function resolve(Request $request, ArgumentMetadata $argument) {
            // creating new instance of custom request DTO
            $class = $argument->getType();
            $dto   = new $class($request, $this->translator);
            // throw bad request exception in case of invalid request data
            $errors = $this->validator->validate($dto);
            if (0 < count($errors)) {
                throw new BadRequestHttpException((string)$errors);
            }
            yield $dto;
        }
    
        /**
         * @return bool|void
         * @throws \ReflectionException
         */
        public function supports(Request $request, ArgumentMetadata $argument) {
            $reflection = new ReflectionClass($argument->getType());
            if ($reflection->implementsInterface(RequestDTOInterface::class)) {
                return true;
            }
    
            return false;
        }
    }


    final class ValidationExceptionEventSubscriber implements EventSubscriberInterface {
        use ApiControllerTrait;
    
        public function __construct(SerializerInterface $serializer) {
            $this->serializer = $serializer;
        }
    
        public static function getSubscribedEvents(): array {
            return [
                KernelEvents::EXCEPTION => [
                    ['processValidationException', 11],
                ],
            ];
        }
    
        public function processValidationException(ExceptionEvent $event): void {
            /** @var ValidationException $exception */
            $exception                 = $event->getThrowable();
            $isValidationFormException = \get_class($exception) === ValidationException::class;
            if (false === $isValidationFormException || false === $event->isMasterRequest()) {
                return;
            }
            $event->setResponse(
                $this->createResponse(
                    $exception->getMessage(),
                    [
                        'violations' => $exception->violations(),
                    ],
                    $this->statusError,
                    null,
                    Response::HTTP_NOT_ACCEPTABLE
                )
            );
        }
    }
    Ответ написан
  • Vuetify v-text-field rules not work?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    В общем, баг в том, что если в поле ничего нет то выдает ошибку.
    Если добавлены правила валидации то нельзя добавлять опцию, параметр clearable и обязательно выставить начальное значение. Будь то строка или номер.

    Естественно в доках ето не указано. Потому что там самый примитивные v-model case без vuex.

    так не сработает
    v-model="this.fields.newPassword"

    для дефолта
    :value="this.fields.newPassword"
    но нельзя ставить clearable
    <v-text-field
                                    :rules="[rules.min, rules.required]" <<< ---- REMOVE if clearable 
                                    :value="this.fields.newPassword" <<< ---- ADD
                                    type="password"
                                    autofocus
                                    background-color="#f0f0f0"
                                    clear-icon="fas fa-times"
                                    color="#0b236b"
                                    placeholder="New password"
                                    solo-inverted
                                    flat
                                    clearable <<< ---- REMOVE if rules 
                                    required
                                    counter
                                    class="caption"
                                    :color="this.violations.newPassword?'red':'#0b236b'"
                                    :append-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
                                    :type="show2 ? 'text' : 'password'"
                                    @click:append="show2 = !show2"
                                    hint="Password must be at least 8 characters, contain an
                                                    upper case letter and a number."
                                    @change="updateField({ fields: [ {fieldName:  'newPassword', fieldValue: $event,}, ], })"
                            />
    Ответ написан
  • Как и чем подсчитать шаги юзера в приложении?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Добавлю свой ответ.

    Читаем:
    1
    A Knowledge-Based Step Length Estimation Method
    Based on Fuzzy Logic and Multi-Sensor Fusion
    Algorithms for a Pedestrian Dead Reckoning System

    2
    Comparison of Different Algorithms for Calculating
    Velocity and Stride Length in Running Using Inertial
    Measurement Units

    3
    Step-Detection and Adaptive Step-Length Estimation
    for Pedestrian Dead-Reckoning at Various Walking
    Speeds Using a Smartphone


    4
    The Height-Adaptive Parameterized Step Length Measurement Method and Experiment Based on Motion Parameters


    5
    Step Detection Algorithm For Accurate Distance
    Estimation Using Dynamic Step Length


    Goole
    algorithm to calculate steps distance


    Ну и так далее. Это что по формулам подсчета пешей дистанции.
    Т.к. тут на форуме о них молчат или не знают. Ведь смысл считать сколько шагов не считая дистанцию которую юзер пробежал или прошел?

    На счет плагина, обычно доступ к ним через window или navigator переменны. Т.к. доки говеные и забыли везде упомянуть об етом. Ах да, еще надо обязательно грузить cordova.js для инициализации плагинов. js файл в папке cordova
    Ответ написан
  • Преимущества Vuex dynamic Modules?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    perfomance boost. Чем больше нагружен store (чем больше там храним) тем выше в динамической подгрузке модулей, в бд lazy loading.
    Ответ написан
  • Как использовать плагины для cordova в шаблонах vue?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    ушло реально много времени, часов 15-20, мало примеров, доки голые, а дебаг приложения вообще жесть, сделал билд, отвалился, сиди гайдай почему так.


    <template>
        <div>
            <h1 v-text="this.title"></h1>
            <hr>
            <h1 v-text="this.steps"></h1>
            <hr>
            <small>
                Above should be number
            </small>
        </div>
    </template>
    
    <script>
          import Vue                      from 'vue';
        import {mapActions, mapGetters} from 'vuex';
        import {SESSION}                from '../store/modulesNames';
    
        export default {
            layout:   'default',
            data:     () => (
                {
                    title: 'Steps:',
                    test: 0,
                }
            ),
            computed: {
                ...mapGetters(
                    SESSION,
                    {
                        steps: `getSteps`,
                    }
                ),
            },
            methods:  {
                ...mapActions(
                    SESSION,
                    {
                        updateSteps: `updateSteps`,
                    }
                ),
    
                error (err) {
                    alert(`Something went wrong, please contact support`);
                    alert(JSON.stringify(err));
                },
                startWatch () {
    
                    const offset = 0;
                    const options = {
                        pedometerIsCountingText:      'SGX counts your steps',
                        pedometerStepsToGoFormatText: '~%s steps to finish',
                        pedometerYourProgressFormatText: '~%s progress',
                        pedometerGoalReachedFormatText: '%s congrats finish!',
                    };
                    const goal = 1000;
                    window.stepper.setGoal(goal, ()=>{}, this.error);
                    window.stepper.startStepperUpdates(
                        offset,
                        this.updateStepsSuccess,
                        this.error,
                        options
                    );
                },
                updateStepsSuccess (result) {
                    const {steps_today, total, average} = result;
                    // alert(JSON.stringify(result));
                    this.updateSteps({steps: steps_today});
                },
            },
            mounted () {
                document.addEventListener('deviceready', () => {
                    alert('Device ready event fired!');
                    this.startWatch();
                });
    
            },
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>


    Там еще отвалились иконки и другие фонты.
    Уже сделаю в другой раз.
    Дока плагина

    Пример который был взят за основу
    Ответ написан
  • Cordova start page свой урл?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    1 - router {mode: hash}
    2 - плагин Custom URL scheme Cordova/PhoneGap Plugin
    Ответ написан
  • Nuxt Cordova Android build infinite loading screen?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    1 - _nuxt на nuxt
    2- пересобрать все предворительно очистить кеш и старые файлы
    npm generate
    #!/bin/bash
     cd dist/
    sed -i 's/\/nuxt\//nuxt\//g' index.html
    sed -i 's/\/nuxt\//nuxt\//g' nuxt/*.json
    sed -i 's/\/nuxt\//nuxt\//g' nuxt/*.js
    cd ..
    cp -R dist/. cordova/www/
    ls
    cd cordova/tasks/
    ./build-android.sh
    cd ../
    cordova run android

    #!/bin/bash
    SCRIPT=$(readlink -f "$0")
    SCRIPTPATH=$(dirname "$SCRIPT")
    cd $SCRIPTPATH
    cd ../
    rm -R --force dist/
    npm install
    cordova platform rm android
    cordova platform add android
    cordova prepare
    cordova clean
    cordova build android
    source /etc/environment
    $ANDROID_HOME/tools/bin/sdkmanager --licenses
    mkdir -p dist
    mv platforms/android/app/build/outputs/apk/debug/app-debug.apk dist/android.apk
    Ответ написан
  • Почему Cordova - FAILURE: Build failed with an exception?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    1 - слетело потому что android license надо дописать скрипт автоприема лицензий или руками каждый раз
    2 - nuxt build потому что нельзя делать импорт плагинов кордовы на прямую как делать правильно, узнаю позже.
    Пока варианты все выдают Undefined
    const { Stepper } = window;
                    console.log(`Stepper`,Stepper); // undefined
                    console.log(`cordova`,cordova); // undefined
                    console.log(`this.cordova`,this.cordova); // undefined
                    console.log(`window.cordova`,window.cordova); // undefined
    Ответ написан
  • Unable to find method 'org.gradle.api.file.ProjectLayout.directoryProperty(Lorg/gradle/api/provider/Provider;)Lorg/gradle/api/file/DirectoryProperty;?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Это очень странно, но что бы пофиксить градл надо было указать пути в /etc/environment
    JAVA_HOME="/usr/lib/jvm/java-8-openjdk-amd64/jre/bin/java"
    ANDROID_HOME=$HOME/Android/Sdk
    ANDROID_SDK_ROOT=$HOME/Android/Sdk

    потом
    source /etc/environment
    принять лицензии програмно
    ./sdkmanager --licenses
    открыть AS IDE, ---|> Help tab ---|> Licenses -|> Accept

    Так же перед тем как отрывать AS IDE надо было выполнить пересборку gradle
    npm platform remove android
    npm platform add android
    npm build android


    result
    Task :app:assembleDebug
    > Task :app:cdvBuildDebug
    
    BUILD SUCCESSFUL in 18s
    42 actionable tasks: 42 executed
    Built the following apk(s): 
            /var/www/test/cordova/platforms/android/app/build/outputs/apk/debug/app-debug.apk
    bonbon@debian:/var/www/test/cordova$


    Возможно какой то провайдер не подгружался из за лицензий или сборка градла была битая.
    Так же убедитесь что SDK нужной версии стоят.
    Может выдавать что Android target: not installed 'это сюда

    DOCS
    Stack
    Ответ написан
  • Как перехватить ошибку Promise?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Все дело в говеном пакете

    Дело в том, что response у нас это string, при попытке его считать, прочитать или залогировать, но как только мы попробуем получить доступ к свойствам которых там нет и не должно быть, магическим образом они там есть.
    Ответ написан
  • Foreign key constraint is incorrectly formed?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Вот что заметил, разница ENGINE таблиц
    PRIMARY KEY(id)) DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci ENGINE = MyISAM COMMENT = \'\' '
            );

    doctrine default engine InnoDB, а так как проект легаси, то новая миграция имела некорректный ENGINE для таблицы. Для этого надо узнать у сисадмина или у кого есть доступ к прод ДБ какой у них тип таблицы, в идеале попросить весь sql.
    Ответ написан
  • Debian stuck on "[OK] started User Manager UID 116"?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    1 - reinstall GRUB as mentioned above, follow question description and comments! (restore boot/efi)
    2 - rollback Kernel, it is possible to launch with it in Advanced mode during booting in GRUB menu.
    3 - remove new Kernel

    IMPORTANT! Do no run this shitty command sudo apt-get dist-upgrade, it will do more damage then fixing!

    Make sure you have enough space to mount.
    You also may need edit GRUB setting like default kernel to launch

    Only thing I dont have time to fix right now, is that GRUB does not see Windows anymore.
    Any suggestions how to fix it, appriciated.

    Reason could be:
    1 - mechanical demage
    2 - windows damaged linux files
    Ответ написан
  • Calculate average relation field?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Обязательно надо добавить
    $query->addGroupBy('m.id');
    перед сортировкой, без этого выдавало непонятный результат, 1 запись 2-го юзера и 3 км, вместо 2-х юзеров и средних показателей
    Ответ написан
  • [ERROR] The version "latest" couldn't be reached, you are at version "0"?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    doctrine_migrations:
        migrations_paths:
            dir_name: '%kernel.project_dir%/src/Migrations' // BAD
            'DoctrineMigrations': '%kernel.project_dir%/migrations' // BAD
            'DoctrineMigrations': '%kernel.project_dir%/src/Migrations' // GOOD!

    What changed? Some package somewhere was updated. This BC occurred. Deprecated dir_name property was replaced by new DoctrineMigrations with wrong path after composer update.
    Ответ написан
  • Добавить кглобальные стили из дочернего компонент?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Пришлось отказаться от иморта стилей в index.ts входная точка компиляции проекта. У вас может быть app.js | .ts или main.js | .ts
    И сделать импорты в лейаут компонентах
    import {Component, Vue} from "vue-property-decorator";
    import * as Template    from './_template.html?style=./_styles.scss'
    import CSSModules       from 'vue-css-modules';
    import stylesCommon     from '@/assets/common/scss/common.scss'; // хотя эти стили использованы везде
    import stylesFonts      from '@fortawesome/fontawesome-free/css/all.css'; // как и эти
    import * as styles      from './_styles.scss'
    // https://github.com/fjc0k/vue-css-modules
    Vue.mixin(
        CSSModules(
            {
                // be careful, 'class' also use by 3-d parties libs classes
                injectAttr: 'class',
                // styles are merged with this.$style by default
                styles:     {...stylesFonts, ...stylesCommon, ...styles},
            }
        )
    );
    @Template
    @Component
    export default class LayoutDefault extends Vue {
        mounted() {
        }
    };


    Выходит в разы больше кода, пока ничего друго не придумал.

    Так же может быть полезным метод который исопльзует пакет
    var CSSModules = function CSSModules(params) {
      var injectAttr = params.injectAttr || undefined,
          styles = params.styles || undefined,
          mergeDefault = params.mergeDefault || false;
      return {
        beforeCreate: function beforeCreate() {
          this.original$createElement = this.original$createElement || this.$createElement;
          this.original_c = this.original_c || this._c;
          this.$createElement = _createElement.default.bind(this, {
            createElement: this.original$createElement,
            context: this,
            styles: styles,
            injectAttr: injectAttr,
            mergeDefault: mergeDefault,
          });
          this._c = _createElement.default.bind(this, {
            createElement: this.original_c,
            context: this,
            styles: styles,
            injectAttr: injectAttr,
            mergeDefault: mergeDefault,
          });
        }
      };
    };

    через this.bind но он куда грязнее.

    Есть у кого идеи получше?
    Ответ написан
  • Vue + TypeScript css modules?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    И так, спустя часов 5-6 нашел решение, и даже больше чем одно

    1 - использовал данный плагин инжектил миксоном в главном файле main.ts.
    2 - console.log console.log(CSSModules({ как должно работал
    3 - важно указать аттр пареаметрinjectAttr: 'class', что бы избежать class="$style.container" обращения к параметру $styles
    4 - $style действительно не будет работать, для того что бы он работал необходимо прописывать какие -то трюки с .d.ts файлом
    // 1. Make sure to import 'vue' before declaring augmented types
    // 2. Specify a file with the types you want to augment
    //    Vue has the constructor type in types/vue.d.ts
    declare module 'vue/types/vue' {
        // 3. Declare augmentation for Vue
        interface Vue {
            // $style: { [key: string]: string }
            $style: any
        }
    }


    но у меня пока не вышло заставить работать $style, хотя модули и css работает какд олжно ввиду миксина и пакету упомянутого выше а еще надо было сделать доп трюки
    5 - прописать файл на css

    declare module '*.css' {
        import Vue, {ComponentOptions, FunctionalComponentOptions} from 'vue'
    
        interface Template2 {
            <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U
    
            <V extends typeof Vue>(component: V): V
        }
    
        const template2: Template2;
        export = template2
    }


    6 - прописать файл на scss
    declare module '*.scss' {
        import Vue, {ComponentOptions, FunctionalComponentOptions} from 'vue'
    
        interface Template {
            <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U
    
            <V extends typeof Vue>(component: V): V
        }
    
        const template: Template;
        export = template
    }


    то есть 3 модуля *.css / *.scss / *.html в .d.ts файлах, можно по идее поместить в один файл ,пока выдает ошибки, эксперементирую
    7 - дописать стили import Template from './app.pug?style=./app.scss'
    8 - и последнее что мне пришлось сделать, удалить папку сборки, build / dist. После новой сборки заработали стили, но пока без модулей

    UPD - что бы заставить работать глобальные и локальные стили пришлось использовать 3+ плагинов разом
    import * as Template from '@/index.html?style=./index.scss'
    import * as test from '@/index.scss';
    
    //   миксин для инжекта local css которые подтянуты template-loader  '@/index.html?style=./index.scss'
    Vue.mixin(
        CSSModules({
            // be careful, 'class' also use by 3-d parties libs classes
            injectAttr: 'class',
            // styles are merged with this.$style by default
            styles: {...stylesFonts, ...stylesCommon, ...test},
        }),
    );

    обратите внимание, $style параметр недоступен, мне было лень танцевать с еще один модулем для TS, может быть потом или кто подскажет как сделать.
    "vue": "^2.6.11",
        "vue-class-component": "^7.2.3",
        "vue-css-modules": "https://github.com/BonBonSlick/vue-css-modules.git", // для инжекта стилей в $style
        "vue-template-loader": "^1.1.0", // для инжекта стилей в сборку, без етого css-modules не работает
        "vue-property-decorator": "^8.4.2", // для рендеринга

    + пакет вебпака, typescript и проч.

    Вот что в шаблоне
    <h1 :class="[$style.hello, $style['text-danger']
        >
            can be used without mixin, but no global styles, $style still not accessible
          style "text-danger" is not available!
        </h1>
        <hr>
        <h2 class="hello">
            injected with template-loader and mixin, global and local styles available. modules
        </h2>


    В общем, пока приходиться исопльзовать mixin для инжекта стилей, в противном случаей где первый вариант с $style переменной, IDE не выдает подсказок, возможно проблему решит TS Plugin упомянутый ниже, но пока хз, и так времени угробил много
    h1 class="XD_i__hello text-danger">
              can be used without mixin, but no global styles, $style still not accessible
          style "text-danger" is not available!
        </h1> 
    <h2 class="XD_i__hello _2qzp__text-danger">
            injected with template-loader and mixin, global and local styles available. modules
        </h2>

    ушло около 7 часов на танци с бубнами.
    На самом деле, слишком много мусора пришлось перекопать, говорил ранее что гайды и примеры с гита устарели
    Вот некоторые из ресурсов которые использовались
    1. https://github.com/fjc0k/vue-css-modules
    2. https://github.com/ktsn/vue-template-loader/tree/m...
    3. https://github.com/ktsn/vue-template-loader
    4. https://github.com/mrmckeb/typescript-plugin-css-m...
    5. https://github.com/nuxt/typescript/issues/35
    6. https://habr.com/ru/post/458632/
    7. https://medium.com/@sapegin/css-modules-with-types...
    8. https://stackoverflow.com/questions/53997704/vue-t...
    9. https://dev.to/georgehanson/building-vuejs-applica...
    10. https://github.com/kaorun343/vue-typescript-exampl...
    11. https://github.com/kaorun343/vue-typescript-example-2
    12. https://github.com/Azure-Samples/vue-cosmosdb/tree...

    https://github.com/wemake-services/wemake-vue-template

    Я потом еще раз пройдусь и посмотрю как бы использовать по меньше слоев, шин, прослоек и прочего говна, пока надо теперь разгрести текущий адь в который превратился проект после TS интеграции.
    Если у кого есть идеи лучше, бду признателен

    Хотя
    <main :id="$style.app"
    пока отваливается т.ке. $style === undefined для этого необходимо добавить еще одну щину к уже существующим css /scss / html

    declare module '*.vue' {
        interface Vue {
            $style: any
        }
    
        export default Vue;
    }

    тут происходит дичайшая магия, т.к. .vue файлов у меня нет все компилируется в dist папочку.
    Пологаю, вебпаке и пакеты, модули, плагины подгружают и парсят друг друга по кругу в скрытом глазу порядке. Так что на каком-то этапе когда идет компиляция extends Vue как шаблонов,идет инджект $styles
    Ответ написан
  • TS2769: No overload matches this call?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Что я понял спуста почти 2-е суток поиска почему не работает, так это то, что 80% гайдов и примеров на git устарели ввиду оверкучи BС.

    Вот пример нерабочего варианта, не знаю почему не работает
    import Template from '@/index.html'
    
    
    @Template
    @Component({
        router,
    })
    class Main extends Vue {
    }
    
    const vm = new Main();
    vm.$mount('#app');

    вот так надо было, не знаю почему именно, казалось по гайдам и некоторым демо проектам так у них работает, возможно старые версии шин действительно могли спарсить
    import * as Template from '@/index.html'
    
    @Template


    Вот шина
    declare module '*.html' {
        // import Vue = require('vue'); // так будет выкидывать  ошибки, СЛОМАНО
    
        import Vue, {ComponentOptions, FunctionalComponentOptions} from 'vue';
    
        interface WithRender {
            <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U // для устранения BC используем 2 типа.
    
            <V extends typeof Vue>(component: V): V
        }
    
        const withRender: WithRender;
        export = withRender
    }

    Заставил работать прочитав десятки статей и гайдов, гитхаб ишшус и разборав демо проектов.

    Если возникла аналогичная ситуация при попытке убрать .vue шаблоны и испльзовать Angular style вам стоит искать ошибки в данных файлах

    1. app.ts он же amain.ts или index.ts который entry_point для webpack.
    2. tsconfig.json
    3. package.json
    4. yarn.lock и node_modules - их надо удалить при повышении версий пакетов
    5. webpack.config.json
    6. html.shim.d.ts


    менее вероятны
    1. index.html - который парсит ваш сервер nginx или апач
    2. index.html - который указан для главного MainApp который мы .$mount('#app'); у меня выше в ответе он показан
    3. html.shim.d.ts - возможно вы используете старую версию
    4. ваш .ts файл компонента


    По началу у меня были конфликты версий, шина и vue старые а декораторы новые.
    В общем, десятки нюансов, а ошибки как всегда указывали чертикуда.
    Ответ написан
  • TS2307: Cannot find module '@/../build/global_const'.?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    "baseUrl": ".",
        "paths": {
          "~/*": [
            "./src/*"
          ],
          "@/*": [
            "./src/*"
          ]
        }

    declare module '*.vue' {
      import Vue from 'vue'
      export default Vue
    }
    Ответ написан
  • Вместо h1 генерирует <h1></h1>?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Preferences | Editor | Emmet | HTML, make sure that 'Escape' filter is not enabled in 'Filters enabled by default'
    Ответ написан
  • Как правильно делать rebase?

    BonBonSlick
    @BonBonSlick Автор вопроса
    Vanilla Web Architect
    Единственный вариант к которому я пришел это ручное сравнение файлов при помощи спец инструментов вродЕ GitG, PhpStorm git plugin или ручной комманды git -diff

    данные комманды работают некорректно с какими либо опциями типа --onto или -X ибо конфликтов нет.
    merge / rebase / pull
    подозреваю это потому что ветка уже была смерджена ранее с develop
    Ответ написан