Por que os atributos HTML são definidos de maneira diferente no DOM?


8

Depois de cavar várias horas, decidimos fazer uma pergunta sobre SO, esperando que alguém pudesse ajudar com relação ao seguinte problema.

  1. Para um de nossos aplicativos da web, usamos a estrutura Onsen UI js com sua biblioteca de suporte ao React
  2. Quando tentamos renderizar o aplicativo em nossos ambientes de desenvolvimento, tudo parece funcionar corretamente, mas quando tentamos em nosso ambiente de teste, alguns componentes se comportam de maneira diferente
  3. O que descobrimos até agora : parece que em nosso ambiente de preparação, alguns atributos HTML são definidos de maneira diferente no DOM:

    |----------------|---------------|--------------|
    | HTML attribute |    DEV ENV    | STAGING ENV  |
    |----------------|---------------|--------------|
    | fixed-content  | fixed-content | fixedcontent |
    |----------------|---------------|--------------|
    | active-index   | active-index  |     index    |
    |----------------|---------------|--------------|
    

Por esse motivo, a estrutura Onsen não pode encontrar os atributos nos elementos HTML e se comporta de maneira diferente, independentemente de:

  1. Usamos o mesmo navegador (verificado com Chrome, Edge, Firefox)
  2. Temos o mesmo código JS carregado nos dois envs

Quais são as diferenças entre os envs:

  1. Os arquivos JS são armazenados localmente em nossas máquinas de desenvolvimento e no S3 para nosso ambiente de teste.
  2. Usamos uma conexão criptografada em nosso ambiente de teste
  3. O cabeçalho Accept-Encoding está gzip, deflateno local e gzip, deflate, brno preparo
  4. Talvez algo mais para procurar?

Alguém sabe o que diabos está acontecendo aqui?


Por acaso, você está usando a versão React com a API JS angular ou base? Como o JS e a versão angular parecem usar conteúdo fixo como atributo, mas a versão React usa renderFixed como atributo. Ou você está usando-o corretamente e a tag reactjs desta pergunta é enganosa?
Shilly 24/01

Portanto, o onsen ui tem um núcleo js puro com uma biblioteca de reações em cima dele. Usamos esses 2 em nosso aplicativo
Mihai Matei

Você está prefixando os atributos data-*?
Brett Gregson

Não. Na verdade, o framerwork da interface do usuário da onsen lida com tudo, mas até onde eu vi, eles não usam conjuntos de dados
Mihai Matei

Respostas:


12

Na verdade, encontramos o problema e a solução é bastante simples, mesmo que levássemos horas para encontrá-lo.

Em nossos ambientes de preparação / produção, usamos o plug transform-react-remove-prop-types- in babel para remover os tipos de suporte do React.

Infelizmente, a biblioteca de suporte Onsen UI React se baseia nos tipos de objetos definidos por seus componentes, portanto, quando foram retirados, a biblioteca começou a se comportar de maneira diferente.

O que fizemos:

  1. Atualizamos o plug-in babel para a versão 0.3.3para poder usar a ignoreFilenamesopção
  2. Ignoramos o arquivo que contém o código da biblioteca Onsen UI React

    if (cli.production) {
        config.babel.plugins.push([
            'transform-react-remove-prop-types',
            {
                ignoreFilenames: ['projectleader']
            }
        ]);
    }
    
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.