How to global import a stylus file in vite

See also questions close to this topic

• how to change prettier format for react native

  my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

  from this code

        import { View, Text } from 'react-native'
      
      import React from 'react'
      
      export default function App() {
        return (
          <View>
      
      <Text>Apps</Text>   
  </View>
        )
      }
  

  it's formatted to this

  import {
    View,
    Text
  } from 'react-native'
  
  import React from 'react'
  
  export default function App() {
    return ( <
      View >
  
      <
      Text > Apps < /Text>
  
  
      <
      /View>
    )
  }
  
• MarkLogic server-side JavaScript and XQuery

  I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

  I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
• Popover in chrome extension using js

  My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

  
• How can I get toast-ui editor content?

  I am a student studying. I think I'm doing it conceptually wrong.

  I'm trying to use vue3 and type script And I'm going to use toast-ui editor.

  I get some errors.

  1. refEditor.value.invoke is not a function

  How can I get toast-ui editor content?

  this is my code

  <template>
    <div class="markup-tables flex">
      <va-card :title="$t('tables.stripedHoverable')">
        <va-card-content>
          <div id="refEditor" ref="refEditor"></div>
          <br />
          <div class="row justify--end paginationButtons-left">
            <va-button class="mr-2 mb-2">List</va-button>
          </div>
          <div class="row justify--end paginationButtons-right">
            <va-button class="mr-2 mb-2" @click="getHTML">Save</va-button>
          </div>
        </va-card-content>
      </va-card>
    </div>
  </template>
  
  <script lang="ts">
  import '@toast-ui/editor/dist/toastui-editor.css'
  
  import Editor from '@toast-ui/editor'
  import { defineComponent, onMounted, ref } from 'vue'
  
  import data from '@/data/tables/markup-table/data.json'
  
  export default defineComponent({
    name: 'BoardWrite',
    setup() {
      const refEditor = ref(null)
  
      const getHTML = () => {
        console.log('getHTML test')
        let html = refEditor.value.invoke('getHtml')
        console.log(html)
        // ERROR 
      }
  
      onMounted(() => {
        const editor = new Editor({
          el: refEditor.value,
          height: '700px',
          initialEditType: 'markdown',
          previewStyle: 'vertical',
        })
        editor.getMarkdown()
      })
  
      return {
        getHTML,
        refEditor,
      }
    },
  })
  </script>
  
• Deploy VueJS + API app to Azure Static Web App with Gitlab doesn't create functions

  I've started creating a small application that will use VueJS as a frontend with Azure Functions as the backend. I was looking at using Azure Static Web Apps to host both components for the application and Gitlab to store / deploy the app.

  Everything but the creation of the Azure functions works. Following https://docs.microsoft.com/en-us/azure/static-web-apps/gitlab?tabs=vue

  The output from the deploy step, listed below is:

  App Directory Location: '/builds/*/valhalla/valhalla-client/dist/spa' was found.
  Api Directory Location: '/builds/*/valhalla/valhalla-api/dist' was found.
  Looking for event info
  Could not get event info. Proceeding
  Starting to build app with Oryx
  Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
  ---Oryx build logs---
  Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
  You can report issues at https://github.com/Microsoft/Oryx/issues
  Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3
  Build Operation ID: |qAffRWArEg8=.deee9498_
  Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b
  Detecting platforms...
  Could not detect any platform in the source directory.
  Error: Could not detect the language from repo.
  ---End of Oryx build logs---
  Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
  Finished building app with Oryx
  Starting to build function app with Oryx
  ---Oryx build logs---
  Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
  You can report issues at https://github.com/Microsoft/Oryx/issues
  Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3
  Build Operation ID: |NGXLP5bVBRk=.705477f6_
  Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b
  Detecting platforms...
  Could not detect any platform in the source directory.
  Error: Could not detect the language from repo.
  ---End of Oryx build logs---
  Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
  [WARNING] The function language could not be detected. The language will be defaulted to node.
  Function Runtime Information. OS: linux, Functions Runtime: ~3, node version: 12
  Finished building function app with Oryx
  Zipping Api Artifacts
  Done Zipping Api Artifacts
  Zipping App Artifacts
  Done Zipping App Artifacts
  Uploading build artifacts.
  Finished Upload. Polling on deployment.
  Status: InProgress. Time: 0.1762737(s)
  Status: InProgress. Time: 15.3950401(s)
  Status: Succeeded. Time: 30.5043965(s)
  Deployment Complete :)
  Visit your site at: https://polite-pebble-0dc00000f.1.azurestaticapps.net
  Thanks for using Azure Static Web Apps!
  Exiting
  Cleaning up project directory and file based variables 00:00
  Job succeeded
  

  The deploy step appears to have succeeded, and the frontend is deployed, but there are no Azure Functions showing up in this Static Web App. Is something missed here? So far, the Azure Functions I have are the boiler-plate from instantiating a new Azure Function folder.

  image: node:latest
  
  variables:
    API_TOKEN: $DEPLOYMENT_TOKEN
    APP_PATH: '$CI_PROJECT_DIR/valhalla-client/dist/spa'
    API_PATH: '$CI_PROJECT_DIR/valhalla-api/dist'
  
  stages:
    - install_api
    - build_api
    - install_client
    - build_client
    - deploy
  
  install_api:
    stage: install_api
    script:
      - cd valhalla-api
      - npm ci
    artifacts:
      paths:
        - valhalla-api/node_modules/
    cache:
      key: node
      paths:
        - valhalla-api/node_modules/
    only:
      - master
      
  install_client:
    stage: install_client
    script:
      - cd valhalla-client
      - npm ci
    artifacts:
      paths:
        - valhalla-client/node_modules/
    cache:
      key: node
      paths:
        - valhalla-client/node_modules/
    only:
      - master
  
  build_api:
    stage: build_api
    dependencies:
      - install_api
    script:
      - cd valhalla-api
      - npm install -g azure-functions-core-tools@3 --unsafe-perm true
      - npm run build
    artifacts:
      paths:
        - valhalla-api/dist
    cache:
      key: build_api
      paths:
        - valhalla-api/dist
    only:
      - master
    needs:
      - job: install_api
        artifacts: true
        optional: true
  
  build_client:
    stage: build_client
    dependencies:
      - install_client
    script:
      - cd valhalla-client
      - npm i -g @quasar/cli
      - quasar build
    artifacts:
      paths:
        - valhalla-client/dist/spa
    cache:
      key: build_client
      paths:
        - valhalla-client/dist/spa
    only:
      - master
    needs:
      - job: install_client
        artifacts: true
        optional: true
  
  deploy:
    stage: deploy
    dependencies:
      - build_api
      - build_client
    image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
    script:
      - echo "App deployed successfully."
    only:
      - master
  
• How to rewrite type defination of third party library in vue project created by create-vue

  I have a vue project using cesium library, following the update of cesium, some errors occur.

  My code:

  camera.setView({
    destination,
    orientation: { heading, pitch }
  })
  

  Error:

  Type '{ heading: number; pitch: number; }' is not assignable to type 'HeadingPitchRollValues | DirectionUp | undefined'.
  Property 'roll' is missing in type '{ heading: number; pitch: number; }' but required in type 'HeadingPitchRollValues'.
  

  The function signature:

  setView(options: {
    destination?: Cartesian3 | Rectangle;
    orientation?: HeadingPitchRollValues | DirectionUp;
    endTransform?: Matrix4;
    convert?: boolean;
  }): void;
  
  export type HeadingPitchRollValues = {
    heading: number;
    pitch: number;
    roll: number;
  };
  

  But in fact the function handles the absence of the roll attribute:

  // Part of javascript source code, handles default value
  // of heading,pitch and roll
  scratchHpr.heading = defaultValue(orientation.heading, 0.0);
  scratchHpr.pitch = defaultValue(orientation.pitch, -CesiumMath.PI_OVER_TWO);
  scratchHpr.roll = defaultValue(orientation.roll, 0.0);
  

  So the type defination should be:

  setView(options: {
    destination?: Cartesian3 | Rectangle;
    orientation?: Partial<HeadingPitchRollValues> | DirectionUp;
    endTransform?: Matrix4;
    convert?: boolean;
  }): void;
  

  I want to rewrite this type in my vue project without using patch-package, how should I do?

  My repo: https://github.com/Gu-Miao/learn-cesium

  ---

  SOME UPDATE

  cesium library type defination structure:

  declare module 'cesium' {
    // ...some classes and functions
    export class Camera {
      // ...some properties
      setView(options: {
        destination?: Cartesian3 | Rectangle
        orientation?: HeadingPitchRollValues | DirectionUp
        endTransform?: Matrix4
        convert?: boolean
      }): void
    }
  }
  

  And there are too many classes and functions so that the file size is about 2MB. What I want is rewrite setView() function's type and keep other work as normal.
• vitest test await async completion of onMounted callback in vue3 component

  I'm playing around with Vitest and want to wait for the completion of a couple mocked fetches in the onMounted lifecycle hook in my component:

  My test:

  import { mount } from '@vue/test-utils';
  import HelloWorld from './HelloWorld.vue';
  import { mockGet } from 'vi-fetch';
  import 'vi-fetch/setup';
  
  mockGet('api/welcome-message').willResolve('Welcome message from vitest');
  mockGet('api/players').willResolve(['Mario', 'Luigi']);
  
  
  test('the players have been rendered', async () => {
    const wrapper = mount(HelloWorld);
  
    const lastPlayer = await wrapper.findAll('.player');
    expect(lastPlayer).toHaveLength(2);
  });
  

  My component script:

  <script setup lang="ts">
  import { onMounted, ref } from 'vue';
  
  const apiMessage = ref('');
  const players = ref<string[]>([]);
  
  
  onMounted(async () => {
    const fetchMessage = fetch('api/welcome-message')
      .then((res) => res.text())
      .then((message: string) => (apiMessage.value = message));
  
    const fetchPlayers = fetch('api/players')
      .then((res) => res.json())
      .then((playersRes: string[]) => (players.value = playersRes));
  });
  </script>
  

  The test fails because, I assume, the code running in onMounted doesn't have time to complete before the test looks for all .player <li> elements (rendered with a v-for) off of the players ref. How can I ask vitest to wait for the responses from each of these fetches before calling the test a failure.

  Thanks.
• Flutter: Filter hitevent for specific PointerDeviceKind and only absorb these

  I am trying to read the stylus with a "global" listener, while still being able to interact with the rest of the UI with the finger. The event object passed to the listeners of the Listener widget actually has a property for the device kind, but I can't tell it which events to absorb and which not to. You can only specify it for every event with HitTestBehavior, but this is not what I want.

  I tried a bit to reverse engineer the Listener widget, but it doesn't seem to be possible to know the pointer device kind at the point where you have to decide whether to fire a hit. And I also could not find out how to cancel an event in the handleEvent callback provided by RenderObject or something like that.

  Listener(
    onPointerDown: (event) {
      if (!pointerKinds.contains(event.kind)) return;
      // Absorb now
      ...
    },
  );
  

  class _SomeRenderObject extends RenderProxyBox {
    @override
    void handleEvent(PointerEvent event, covariant HitTestEntry entry) {
      if(event.kind != PointerDeviceKind.stylus) {
        // Cancel event
      }
    }
  }
  
• Vue Stylus Sass Variables

  After integrating stylus into my Vue3 application, my global css variables no longer work (loaded through prependData as mentioned here).

  Old, working code (no stylus):

  <style>
    .item {
      background-color: $bgColor;
    }
  </style>
  

  New code, doesn't work (w/ stylus):

  <style lang="stylus">
  .item 
    background-color: $bgColor;
  </style>
  

  ---

  Is it possible to update my old code to leverage stylus and keep my variable structure? Thanks for your ideas.
• WPF C# Touch doens't work until the 11th touch

  I've made an application, for self service, a KIOSK app. The product list is generated programmatically. On every window the program works fine on touch screen. Except for one window, where I have to touch exactly 10 times before it starts to work. I've tried to remake that window, I've put only one button on it, but it's the same. If i disable stylus and touch support with: <AppContextSwitchOverrides value="Switch.System.Windows.Input.Stylus.DisableStylusAndTouchSupport=true"/> than it works. But this disables touch scrolling which is necessary for good user experience. If i use touchdown or something similar it works, but I have CheckBox and RadioButton on that window, and I couldn't catch any Touch event on them. Any ideas?

  Even if I clean everything from my code, or I create a new window with the same name, it doesn't work...

  This is my windows xml:

  <Window x:Class="GestbalSelfSalePOS.ProdusComandaDetailsWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:local="clr-namespace:GestbalSelfSalePOS"
          xmlns:sys="clr-namespace:System;assembly=mscorlib"
          mc:Ignorable="d"
          Title="ProdusComandaDetailsWindow">
      <Grid>
          <Button Click="BackButton_Click" Content="Button" Margin="120"/>
      </Grid>
  </Window>
  

  My CS:

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  using System.Windows;
  using System.Windows.Controls;
  using System.Windows.Data;
  using System.Windows.Documents;
  using System.Windows.Input;
  using System.Windows.Media;
  using System.Windows.Media.Imaging;
  using System.Windows.Shapes;
  
  namespace GestbalSelfSalePOS
  {
      /// <summary>
      /// Interaction logic for ProdusComandaDetailsWindow.xaml
      /// </summary>
      public partial class ProdusComandaDetailsWindow : Window
      {
          public ProdusComandaDetailsWindow()
          {
              InitializeComponent();
          }
  
          private void BackButton_Click(object sender, RoutedEventArgs e)
          {
              this.Close();
          }
      }
  }
  

  This is how I open this window:

  new ProdusComandaDetailsWindow().ShowDialog();